Widgets werken niet naast elkaar

Status
Niet open voor verdere reacties.

Liannevh

Nieuwe gebruiker
Lid geworden
2 jun 2012
Berichten
3
Goedemiddag,

Dit is de eerste keer dat ik forum bezoek, maar ik kan helaas geen antwoord op mijn vraag vinden.
Ik ben een site aan het maken met dreamweaver en wil hier graag twee widgets opzetten, naast elkaar. Het betreft een twitter widget en een soort fotoslider. Nu werken ze allebei prima afzonderlijk, maar als ik ze samen op een pagina zet verdwijnt degene die ik het laatst heb toegevoegd. Ik denk dat de scripts elkaar in de weg zitten?

Ik heb een template gebruikt van dreamweaver en gezien dit de eerste keer dat ik dreamweaver gebruik zullen er nog wel meer foutjes inzitten...:confused:

Iemand een idee hoe ik beide widgets kan laten werken?
Thnx


HTML:
  <script type="text/javascript">
// BeginOAWidget_Instance_2827522: #OAWidget
$(window).load(function() {
      $('.flexslider').flexslider({
      animation: "fade",
      controlsContainer: ".flex-container",		//Selector: Declare which container the navigation elements should be appended too. Default container is the flexSlider element. If the given element is not found, the default action will be taken.				  
      slideDirection: "horizontal",   //String: Select the sliding direction, 'horizontal' or 'vertical'
      slideshow: true,                //Boolean: Animate slider automatically
      slideshowSpeed: 5000,           //Integer: Set the speed of the slideshow cycling, in milliseconds
      animationDuration: 600,         //Integer: Set the speed of animations, in milliseconds
      directionNav: true,             //Boolean: Create navigation for previous/next navigation? (true/false)
      controlNav: true,               //Boolean: Create navigation for paging control of each clide? Note: Leave true for manualControls usage
      keyboardNav: true,              //Boolean: Allow slider navigating via keyboard left/right keys
      mousewheel: false,              //Boolean: Allow slider navigating via mousewheel
      prevText: "Previous",           //String: Set the text for the "previous" directionNav item
      nextText: "Next",               //String: Set the text for the "next" directionNav item
      pausePlay: false,               //Boolean: Create pause/play dynamic element
      pauseText: "Pause",             //String: Set the text for the "pause" pausePlay item
      playText: "Play",               //String: Set the text for the "play" pausePlay item
      randomize: false,               //Boolean: Randomize slide order
      slideToStart: 0,                //Integer: The slide that the slider should start on. Array notation (0 = first slide)
      animationLoop: true,            //Boolean: Should the animation loop? If false, directionNav will received "disable" classes at either end
      pauseOnAction: true,            //Boolean: Pause the slideshow when interacting with control elements, highly recommended.
      pauseOnHover: true,            //Boolean: Pause the slideshow when hovering over slider, then resume when no longer hovering     
      manualControls: "",             //Selector: Declare custom control navigation. Example would be ".flex-control-nav li" or "#tabs-nav li img", etc. The number of elements in your controlNav should match the number of slides/tabs.
      start: function(){},            //Callback: function(slider) - Fires when the slider loads the first slide
      before: function(){},           //Callback: function(slider) - Fires asynchronously with each slider animation
      after: function(){},            //Callback: function(slider) - Fires after each slider animation completes
      end: function(){}               //Callback: function(slider) - Fires when the slider reaches the last slide (asynchronous)
      
      });
      });
// EndOAWidget_Instance_2827522
  </script>
  <div id="container2"><!--=============================
      Markup for FADE animation
      =================================-->
    <div class="flex-container">
      <div class="flexslider">
        <ul class="slides">
          <li> <img src="images/kaart4.jpg" />
            <p class="flex-caption">voorbeeld!</p>
          </li>
          <li> <a href="http://hetcamerameisje.com"><img src="images/kaart3.jpg" /></a>   <p class="flex-caption">voorbeeld!</p>
          </li>
          <li> <img src="images/kaart1.jpg" />    <p class="flex-caption">voorbeeld!</p></li>
          <li> <img src="images/kaart2.jpg" />    <p class="flex-caption">voorbeeld!</p></li>
        </ul>
      </div>
    </div>
  </div>
</div>
<div id="apDiv4">
  <div id="twitter"></div>
  <script type="text/javascript">
// BeginOAWidget_Instance_2125523: #twitter

$(document).ready(function() {
	$('#twitter').twitterSearch({
		term: 'Camerameisje',
		title: 'Camerameisje tweets ',
		titleLink: 'http://www.hetcamerameisje.nl/tweets',
		bird: false,					// true or false (show or hide twitter bird image)
		birdSrc: '/images/tweet.gif', 		// twitter bird image
		birdLink: 'http://twitter.com/camerameisje',		// url that twitter bird image should like to
		avatar: true,				// true or false (show or hide twitter profile images)
		anchors: true,			// true or false (enable embedded links in tweets)
		animOutSpeed: 500,	// speed of animation for top tweet when removed
		animInSpeed: 500,	// speed of scroll animation for moving tweets up
		pause: true,				// true or false (pause on hover)
		time: true,					// true or false (show or hide the time that the tweet was sent)
		timeout: 4000,			// delay betweet tweet scroll
		css: { 
			a:     { textDecoration: 'none', color: '#ff99cc', fontWeight: 'normal'},
			container: { backgroundColor: '#ffffff' },
			frame: { border: '10px solid #ffffff', borderRadius: '10px', '-moz-border-radius': '10px', '-webkit-border-radius': '10px' },
			img:   { width: '30px', height: '30px' },
			loading: { color: '#cccccc' },
			text:  {fontWeight: 'normal', fontSize: '12px', color:'#333333'},
			time:  { fontSize: '10px', color: '#cccccc' },
			title: { backgroundColor: '#ffffff', padding: '5px 0 5px 0', textAlign: 'center', fontWeight: 'bold', fontSize: '14px'},
			titleLink: { textDecoration: 'none', color: '#ff99cc' },
			user:  { fontSize: '12px'},
			fail:  { background: '#6cc5c3 url(/images/failwhale.png) no-repeat 50% 50%'}
		}
	});
});
		
// EndOAWidget_Instance_2125523
  </script>
</div>
<div class="container">
  <div class="header"><iframe width="1000" height="563" src="http://www.youtube.com/embed/gXlA8-9V7QA?rel=0" frameborder="0" allowfullscreen></iframe></div>
  
<!-- end .container --></div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>
 
Laatst bewerkt:
Plaats je code even in een HTML tag, dan is het veel eenvoudiger te lezen.
 
Laatst bewerkt:
hoe kan ik dat het makkelijkst doen? Als ik het kopieer dan verdwijnt het namelijk..
 
Klik op Bericht aanpassen.
Klik dan op Ga geavanceerd.
Selecteer je code en klik op de <> knop boven je tekst.
 
Hoi Liannevh,
Welkom op het forum! :)

Het is merkwaardig:
  • Als ik de pagina hetcamerameisje.nl/Concept.html, waar zowel de flexslider als de twitter-widget in zitten, bekijk met Firefox, Chrome, Opera of Safari, dan doen beide dingen het zonder mopperen.
  • D.w.z. op de nieuwe twitter-pagina verschijnt de grijze twitter-balk meteen in beeld, en alles eronder is wit. Pas een paar tellen later volgt de inhoud er onder. De vertraging zal zitten in het door twitter moeten ophalen van de tweets en/of de drukte van het moment op twitter.
  • In mijn Internet Explorer 7 verschijnt er onder de twitterbalk helemaal niets, ook niet na geduldig een kwartiertje wachten. De twitter-berichten komen niet!
  • Maar ... dat zit 'm kennelijk niet in jouw pagina, want het is ook zo als ik een willekeurig ander twitter-profiel open: niets! :shocked:
  • Dat zou aan IE7 kunnen liggen, maar het zou ook aan de Twitter-pagina zelf kunnen liggen, waar jij niets aan kunt doen (twitter.com/#!/camerameisje).
  • Wat er op de Twitter-pagina gebeurt in Internet Explorer 8 en IE9, kan ik niet testen.

Om het nog geheimzinniger te maken:

Maar dat kunnen we voor de camera-tweets ook toepassen! I.p.v. (helemaal op het eind in de broncode):
HTML:
<a href="http://www.twitter.com/camerameisje" title="Twitter het camerameisje" target="_blank">
... er van maken:
HTML:
<a href="https://twitter.com/intent/user?screen_name=camerameisje" title="Twitter het camerameisje" target="_blank">

Nu zijn ook in IE7 tweets te bewonderen :) (maar voor alle browsers: alleen de laatste twee :confused: ).
  • Of je op deze alternatieve pagina als bezoeker ook tweets/commentaren kan toevoegen, weet ik niet; daarvoor ben ik onvoldoende thuis in de Twitter-materie.
  • Via de link onderaan op de alternatieve pagina naar het volledige profiel kan je wel weer op de oude pagina uitkomen; tenminste met Firefox, Chrome, Opera en Safari. Met IE7 dus niet (en met IE8 en IE9 mij onbekend).

De proef op de som:

Tot zover ben ik gekomen.
Met vriendelijke groet,
CSShunter
________
PS
De generator="Web Page Maker" heeft er wel een beetje een soep-zooitje van gemaakt: de pagina's zijn twee keer zo breed als nodig (scrollbar L/R onderin geeft veel mooi zwart aan de rechterkant), de pagina's zijn meer dan 2,5 keer zo hoog als nodig, alle <div>'s hebben een absolute positie (doorgaans, en hier ook, een bron van ellende), en er wordt een serie "tags" aan de pagina toegevoegd (kennelijk met de bedoeling, zoals op de homepage, om als hidden text voor zoekmachines te dienen).
Zo'n hidden text zou ik nooit doen, want dat wordt expliciet door Google afgeraden: op straffe van door Google onbetrouwbaar te worden gevonden en daarmee juist te zakken ipv te stijgen in de zoekresultaten ... (zie hier in de Google webmaster-richtlijnen).
O ja, en erbarmelijk verouderde html-codering (12 jaar geleden al achterhaald), die zelfs bij het meest toegeeflijke Doctype (html4.01 transitional) toch nog tientallen html-errors oplevert (bv. 33 Errors, 3 warnings op de concept-pagina)
 
Laatst bewerkt:
Erratum!
Hola! Nu zie ik pas dat de code uit je vraag niet de code is die op de huidige site wordt gebruikt! :o
  • Omdat code-fragmenten vaak beïnvloed worden door andere dingen die elders op de pagina staan, duik ik het liefst meteen op een online pagina met alles er op en er aan, voordat ik conclusies ga trekken. En ik had de huidige site aangezien voor het online-voorbeeld van de script-stukjes. Vandaar!
- Waarschijnlijk ben je juist bezig om in Dreamweaver een complete remake van de site te maken (met jQuery erbij, wat niet op de actuele site wordt gebruikt), en dan gaat m'n bovenstaande verhaal niet op.

Er zit een verschil in aanroep van de twee widgets. De één is:
HTML:
$(window).load(function() {
      $('.flexslider').flexslider({
De ander is:
HTML:
$(document).ready(function() {
    $('#twitter').twitterSearch({
Eén van de twee zal de goede zijn die voor beide gevallen gebruikt moet worden. Welke dat is weet ik niet. Een jQuery-deskundige zal dat zo kunnen vertellen, denk ik.

Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
Beste CSShunter,

Dank je wel voor je uitgebreide antwoord!
Ik ben inderdaad de pagina opnieuw aan het maken, dit keer in dreamweaver, omdat het met webpage-maker een beetje een zooitje wordt en ik bepaalde functies mis. Maar gezien ik er (nog) weinig verstand van heb is dit best een klus.. :D

Ik ga nog eens verder met de codes spelen, kijken of ik er uit kom. En anders inderdaad op zoek naar een jQuery-deskundige!

Nogmaals dank voor je hulp!

Groetjes, Lianne
 
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan