Jump to content
Larry Ullman's Book Forums

Search the Community

Showing results for tags 'javascript jquery id'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • Single Editions
    • Modern Javascript: Develop and Design
    • The Yii Book
    • Effortless Flex 4 Development
    • Building a Web Site with Ajax: Visual QuickProject
    • Ruby: Visual QuickStart Guide
    • C++ Programming: Visual QuickStart Guide
    • C Programming: Visual QuickStart Guide
    • Adobe AIR: Visual QuickPro Guide
  • PHP and MySQL for Dynamic Web Sites: Visual QuickPro Guide
    • PHP and MySQL for Dynamic Web Sites: Visual QuickPro Guide (5th Edition)
    • PHP and MySQL for Dynamic Web Sites: Visual QuickPro Guide (4th Edition)
    • PHP 6 and MySQL 5 for Dynamic Web Sites: Visual QuickPro Guide (3rd Edition)
    • PHP and MySQL for Dynamic Web Sites: Visual QuickPro Guide (2nd Edition)
    • PHP and MySQL for Dynamic Web Sites: Visual QuickPro Guide (1st Edition)
  • PHP for the Web: Visual QuickStart Guide
    • PHP for the Web: Visual QuickStart Guide (5th Edition)
    • PHP for the Web: Visual QuickStart Guide (4th Edition)
    • PHP for the Web: Visual QuickStart Guide (3rd Edition)
    • PHP for the World Wide Web: Visual QuickStart Guide (2nd Edition)
    • PHP for the World Wide Web: Visual QuickStart Guide (1st Edition)
  • Effortless E-commerce with PHP and MySQL
    • Effortless E-Commerce with PHP and MySQL (2nd Edition)
    • Effortless E-Commerce with PHP and MySQL
  • PHP Advanced: Visual QuickPro Guide
    • PHP Advanced and Object-Oriented Programming: Visual QuickPro Guide (3rd Edition)
    • PHP 5 Advanced: Visual QuickPro Guide (2nd Edition)
    • PHP Advanced: Visual QuickPro Guide
  • MySQL: Visual QuickStart Guide
    • MySQL: Visual QuickStart Guide (2nd Edition)
    • MySQL: Visual QuickStart Guide (1st Edition)
  • Other
    • Announcements
    • Newsletter, Blog, and Other Topics
    • Forum Issues
    • Social

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Found 1 result

  1. This, I suppose, is as much an HTML question as a js or jQuery question so I'm not sure if this is the proper forum. But, here goes.... I'm trying to use a jQuery image rotater function in my "responsive" html design. My Bootstrap 3 framework let's me display html layout differently depending on the screen size. THE PROBLEM is that I want to use the same jQuery function (which uses the id #fader) to format the page differently according to the screen size. However, referencing the same #id more than once on a page is not allowed. So, I end up making multiple versions of the function "fader" and just change the id name. That results in something that works but uses lots of code. I'm looking for suggestions on how to handle this by using the function only once( I already tried changing "#fader" to ".fader" so to make it a class instead of an id but it did not work (I'm not a great js programmer however). Please refer to this script sample below. Here's the HTML code that accesses the function according to screen size. Here, I have simply made two copies of the function with a different id name for each (fader.txt and fader2.txt): <!--IMAGE FADER for DESKTOP screens--> <div class="visible-lg"> <script src="assets/js/fader.txt"></script> <div style="position:absolute;top:100px; left:650px"> <div id="fader" class="visible-lg"> <img src="images/standInImage.jpg" width="500"> <img src="images/standin2.jpg" width="500"> <img src="images/standin3.jpg" width="500"> <img src="images/standin4.jpg" width="500"> </div> </div> </div> <!--IMAGE FADER for TABLET screens--> <div class="visible-md visible-sm"> <script src="assets/js/fader2.txt"></script> <div style="position:absolute;top:150px; left:450px"> <div id="fader2"> <img src="images/standInImage.jpg" width="350"> <img src="images/standin2.jpg" width="350"> <img src="images/standin3.jpg" width="350"> <img src="images/standin4.jpg" width="350"> </div> </div> </div> Here's the jQuery code itself using "#fader" $(function() { $("#fader img:not(:first)").hide(); $("#fader img").css("position", "absolute"); $("#fader img").css("top", "0px"); $("#fader img").css("left", "50%"); $("#fader img").each(function() { var img = $(this); $("<img>").attr("src", $(this).attr("src")).load(function() { img.css("margin-left", -this.width / 2 + "px"); }); }); var pause = false; function fadeNext() { $("#fader img").first().fadeOut().appendTo($("#fader")); $("#fader img").first().fadeIn(); } function fadePrev() { $("#fader img").first().fadeOut(); $("#fader img").last().prependTo($("#fader")).fadeIn(); } $("#fader, #next").click(function() { fadeNext(); }); $("#prev").click(function() { fadePrev(); }); /* $("#fader, .button").hover(function() { pause = true; },function() { pause = false; });*/ function doRotate() { if(!pause) { fadeNext(); } } var rotate = setInterval(doRotate, 5000); }); I will need a total of 4 layouts for 4 different screen sizes for a single html page. I hope I can do this without having to load 4 copies of the same script but with different id names. Thank you. I hope I have stated this problem clearly.
×
×
  • Create New...