Απόρια σε javascript

Κώδικας, πληροφορίες, ερωτήσεις και απαντήσεις σχετικές με την JavaScript.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
orepas
Δημοσιεύσεις: 1
Εγγραφή: 30 Νοέμ 2011 01:46

Απόρια σε javascript

Δημοσίευση από orepas » 26 Μαρ 2012 18:36

Σε ένα site (με joomla cms) καλώ στο head tag τα εξής javascript


Κώδικας: Επιλογή όλων

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.history.js"></script>
<script type="text/javascript" src="js/jquery.galleriffic.js"></script>
<script type="text/javascript" src="js/jquery.opacityrollover.js"></script>

<script type="text/javascript">document.write&#40;'<style>.noscript &#123; display&#58; none; &#125;</style>'&#41;;</script>


Εχω δυο ενσωματωμενα, εκτός των εξωτερικών που καλώ, scripts στη σελίδα μου, περασμένα στα head tags.

Ενα για slideshow (το "gallerific" για όσους το ξέρουν) :


Κώδικας: Επιλογή όλων

<script type="text/javascript">
  	jQuery&#40;document&#41;.ready&#40;function&#40;$&#41; &#123;
    // We only want these styles applied when javascript is enabled
    $&#40;'div.content'&#41;.css&#40;'display', 'block'&#41;;

    // Initially set opacity on thumbs and add
    // additional styling for hover effect on thumbs
    var onMouseOutOpacity = 0.9;
    $&#40;'#thumbs ul.thumbs li, div.navigation a.pageLink'&#41;.opacityrollover&#40;&#123;
    	mouseOutOpacity&#58;   onMouseOutOpacity,
    	mouseOverOpacity&#58;  1.0,
    	fadeSpeed&#58;         'fast',
    	exemptionSelector&#58; '.selected'
    &#125;&#41;;
    
    // Initialize Advanced Galleriffic Gallery
    var gallery = $&#40;'#thumbs'&#41;.galleriffic&#40;&#123;
    	delay&#58;                     2500,
    	numThumbs&#58;                 10,
    	preloadAhead&#58;              10,
    	enableTopPager&#58;            false,
    	enableBottomPager&#58;         false,
    	imageContainerSel&#58;         '#slideshow',
    	controlsContainerSel&#58;      '#controls',
    	captionContainerSel&#58;       '#caption',
    	loadingContainerSel&#58;       '#loading',
    	renderSSControls&#58;          true,
    	renderNavControls&#58;         true,
    	playLinkText&#58;              'Play Slideshow',
    	pauseLinkText&#58;             'Pause Slideshow',
    	prevLinkText&#58;              '&lsaquo; Previous Photo',
    	nextLinkText&#58;              'Next Photo &rsaquo;',
    	nextPageLinkText&#58;          'Next &rsaquo;',
    	prevPageLinkText&#58;          '&lsaquo; Prev',
    	enableHistory&#58;             true,
    	autoStart&#58;                 true,
    	syncTransitions&#58;           true,
    	defaultTransitionDuration&#58; 900,
    	onSlideChange&#58;             function&#40;prevIndex, nextIndex&#41; &#123;
      // 'this' refers to the gallery, which is an extension of $&#40;'#thumbs'&#41;
      this.find&#40;'ul.thumbs'&#41;.children&#40;&#41;
      	.eq&#40;prevIndex&#41;.fadeTo&#40;'fast', onMouseOutOpacity&#41;.end&#40;&#41;
      	.eq&#40;nextIndex&#41;.fadeTo&#40;'fast', 1.0&#41;;

      // Update the photo index display
      this.$captionContainer.find&#40;'div.photo-index'&#41;
      	.html&#40;'Photo '+ &#40;nextIndex+1&#41; +' of '+ this.data.length&#41;;
    	&#125;,
    	onPageTransitionOut&#58;       function&#40;callback&#41; &#123;
      this.fadeTo&#40;'fast', 0.0, callback&#41;;
    	&#125;,
    	onPageTransitionIn&#58;        function&#40;&#41; &#123;
      var prevPageLink = this.find&#40;'a.prev'&#41;.css&#40;'visibility', 'hidden'&#41;;
      var nextPageLink = this.find&#40;'a.next'&#41;.css&#40;'visibility', 'hidden'&#41;;
      
      // Show appropriate next / prev page links
      if &#40;this.displayedPage > 0&#41;
      	prevPageLink.css&#40;'visibility', 'visible'&#41;;

      var lastPage = this.getNumPages&#40;&#41; - 1;
      if &#40;this.displayedPage < lastPage&#41;
      	nextPageLink.css&#40;'visibility', 'visible'&#41;;

      this.fadeTo&#40;'fast', 1.0&#41;;
    	&#125;
    &#125;&#41;;

    /**************** Event handlers for custom next / prev page links **********************/

    gallery.find&#40;'a.prev'&#41;.click&#40;function&#40;e&#41; &#123;
    	gallery.previousPage&#40;&#41;;
    	e.preventDefault&#40;&#41;;
    &#125;&#41;;

    gallery.find&#40;'a.next'&#41;.click&#40;function&#40;e&#41; &#123;
    	gallery.nextPage&#40;&#41;;
    	e.preventDefault&#40;&#41;;
    &#125;&#41;;

    /****************************************************************************************/

    /**** Functions to support integration of galleriffic with the jquery.history plugin ****/

    // PageLoad function
    // This function is called when&#58;
    // 1. after calling $.historyInit&#40;&#41;;
    // 2. after calling $.historyLoad&#40;&#41;;
    // 3. after pushing "Go Back" button of a browser
    function pageload&#40;hash&#41; &#123;
    	// alert&#40;"pageload&#58; " + hash&#41;;
    	// hash doesn't contain the first # character.
    	if&#40;hash&#41; &#123;
      $.galleriffic.gotoImage&#40;hash&#41;;
    	&#125; else &#123;
      gallery.gotoIndex&#40;0&#41;;
    	&#125;
    &#125;

    // Initialize history plugin.
    // The callback is called at once by present location.hash. 
    $.historyInit&#40;pageload, "advanced.html"&#41;;

    // set onlick event for buttons using the jQuery 1.3 live method
    $&#40;"a&#91;rel='history'&#93;"&#41;.live&#40;'click', function&#40;e&#41; &#123;
    	if &#40;e.button != 0&#41; return true;

    	var hash = this.href;
    	hash = hash.replace&#40;/^.*#/, ''&#41;;

    	// moves to a new page. 
    	// pageload is called at once. 
    	// hash don't contain "#", "?"
    	$.historyLoad&#40;hash&#41;;

    	return false;
    &#125;&#41;;

    /****************************************************************************************/
  	&#125;&#41;;
  </script>


Επίσης ένα ενσωματωμένο script στη σελίδα μου για ένα dropdownmenu εντός των headtags:

Κώδικας: Επιλογή όλων

 <script language="javascript" type="text/javascript">  
  
var axm = &#123;
	
    	
	openMenu&#58;  function&#40;&#41; &#123;
      $&#40;'#newmenuheader'&#41;.stop&#40;&#41;.animate&#40;&#123; 'height'&#58;'140px'&#125;, "fast"&#41;;
    	&#125;,
    	
	closeMenu&#58;  function&#40;&#41; &#123;
      $&#40;'#newmenuheader'&#41;.stop&#40;&#41;.css&#40;&#123;'overflow'&#58; 'hidden'&#125;&#41;.animate&#40;&#123;'height'&#58;'55px'&#125;, "fast"&#41;;
    	&#125;,
	
&#125;;

</script>


Μπορώ να υλοποίησω ένα script είτε το ένα είτε το άλλο.Όχι και τα δύο μαζί.

Τώρα είναι λειτουργικό το script για το slideshow.Το άλλο, το dropdown μενου δηλαδή, αρνείται να υλοποιήσει τη λειτουργία.

Υπάρχει κάποιο conflict ; Η jquery library έχει κληθεί ορθά ;

Αν κάποιος μπορεί να βοηθήσει γιατί είμαι λίγο καινούργιος στη javascript.

alou
Script Master
Δημοσιεύσεις: 1374
Εγγραφή: 24 Αύγ 2007 19:52
Επικοινωνία:

Απόρια σε javascript

Δημοσίευση από alou » 27 Μαρ 2012 00:49

Με το δεύτερο script δεν κάνεις τίποτα εκτός αν υπάρχει και κάτι άλλο που το χρησιμοποιεί.

Υπάρχουν 2 functions (openmenu και closemenu) που απλά δηλώνονται αλλά δεν χρησιμοποιούνται. Μέσα στο script του gallery plugin, κάτω από το

Κώδικας: Επιλογή όλων

 jQuery&#40;document&#41;.ready&#40;function&#40;$&#41; &#123; 
βάλε τα function αυτά να εκτελούνται με κάποιο event που θέλεις, αν π.χ. το μενού σου είναι ul.menu, κάντο κάπως έτσι:

Κώδικας: Επιλογή όλων

jQuery&#40;document&#41;.ready&#40;function&#40;$&#41; &#123; 
$&#40;'ul.menu li'&#41;.hover&#40;function&#40;&#41; &#123;
	$&#40;'#newmenuheader'&#41;.stop&#40;&#41;.animate&#40;&#123; 'height'&#58;'140px'&#125;, "fast"&#41;;&#125;,
	function&#40;&#41; &#123;
      $&#40;'#newmenuheader'&#41;.stop&#40;&#41;.css&#40;&#123;'overflow'&#58; 'hidden'&#125;&#41;.animate&#40;&#123;'height'&#58;'55px'&#125;, "fast"&#41;;
	&#125;
&#41;
...
αν βέβαια το #newmenuheader είναι αυτό που θες να μεγαλώνει.

Ξεκινάς με το ερώτημα με ποιό event θες να εκτελεστεί το function (click; hover; σε ποιό στοιχείο;) και μετά ορίζεις ποιό (html) στοιχείο θα στοχεύσεις και τι ιδιότητες θα αλλάξεις.

Απάντηση

Επιστροφή στο “JavaScript και Frameworks”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 0 επισκέπτες