0
Welcome Guest! Login
0 items Join Now

Can anyone test width() and css("width")

  • Can anyone test width() and css("width")

    Posted 8 years 11 months ago
    • Hi folks

      Is this a bug, am I being an idiot

      I am trying to make jQuery happen at certain device widths
      (if you can offer a better way, please do)

      It doesn't seem to handle widths over 1000px very well.
      Starting from narrowest width and expand form there I get
      green
      orange
      blue
      green

      no indigo or cyan

      Is this your experience, am I missing something?
      PS I'm using
      Chrome
      Version 41.0.2272.118 (64-bit)
      Firefox
      Version 37.0.1
      Joomla
      Version 3.4
      // This line used to make work in Joomla
      (function($) {
      	// $(document).ready(function()
      	$(document).ready(function() {
      		
      		// Test to see if jQuery working
      		$("#rt-header").css("background-color", "rgba(100,50,1,0.2)");
      		// Test to see if jQuery working END
      	    
      	    $(window).resize(checkSize);
      	    
      	    checkSize();
      	    
      	    function checkSize() {
      			var xsBreakpoint = "480px";
      			var smBreakpoint = "767px";
      			var mdBreakpoint = "959px";
      			var lgBreakpoint = "1200px";	
      			var screenWidth = $('body').width() + "px";
      			// var screenWidth = $('body').css("width"); // can change to this, still have 'issue'
                  
                  // OPTION 1
      		    if (screenWidth > "0px") {
      		        $("div").css("background-color", "green")
      		    } else if (screenWidth > xsBreakpoint) {
      		        $("div").css("background-color", "orange")
      		    } else if (screenWidth > smBreakpoint) {
      		        $("div").css("background-color", "blue")
      		    } else if (screenWidth > mdBreakpoint) {
      		        $("div").css("background-color", "indigo")
      		    } else if (screenWidth > lgBreakpoint) {
      		        $("div").css("background-color", "cyan")
      		    }	
      		    
      		    // OPTION 2
                  //  if ((screenWidth > "0px"  ) && (screenWidth <= xsBreakpoint )) {
      		    //     $("div").css("background-color", "green");
      		    //  } else 
      		    //  if ((screenWidth > xsBreakpoint  ) && (screenWidth <= smBreakpoint )) {
      		    //     $("div").css("background-color", "orange");
      		    //  } else
      		    //  if ((screenWidth > smBreakpoint  ) && (screenWidth <= mdBreakpoint )) {
      		    //     $("div").css("background-color", "blue");
      		    //  } else
      		    //  if ((screenWidth > mdBreakpoint  ) && (screenWidth <= lgBreakpoint )) {
      		    //     $("div").css("background-color", "indigo");
      		    //  } else
      		    //  if ((screenWidth > lgBreakpoint )) {
      		    //     $("div").css("background-color", "cyan");
      		    //  }
      	    }
      	})
      	// $(document).ready(function() END
      })(jQuery);
      // (function($) END
    • Last Edit: 8 years 11 months ago by Jon Buckner.
  • Re: Can anyone test width() and css("width")

    Posted 8 years 11 months ago
    • As an answer / solution:

      I chose an element that would not be effected or effect others with a z-index value
      This works great...so far :)

      			/*#rt-mainbody*/
      			#rt-mainbody {
      				position: relative; // Important as z-index requires anything other than 'static'
      				// Large Mode
      				@media only screen and (min-width: 1200px) {
      					z-index: 4;				}
      				// Desktop Modes
      				@media only screen and (min-width: 960px) and (max-width: 1199px) {
      					z-index: 3;
      				}
      				// Tablet Modes
      				@media (min-width: 768px) and (max-width: 959px) {
      					z-index: 2;
      				}
      				// Mobile Modes
      				@media (max-width: 767px) {
      					z-index: 1;
      				}
      				// Small Screen Mobile Modes
      				@media only screen and (max-width: 480px) {
      					z-index: auto;
      				}
      			}
      			/*#rt-mainbody END*/


      		// Timer on resize
      		var sizeUpdate;
      		window.onresize = function(){
      			clearTimeout(sizeUpdate);
      			sizeUpdate = setTimeout(myFunkyEffort, 100);
      		};	    
      		// Timer on resize END
      
      
      		myFunkyEffort();  // calls the function on pageload
      
      		function myFunkyEffort() {
      			var rtMainbodyCssProperty = $("#rt-mainbody").css("z-index");
      			switch (rtMainbodyCssProperty) { 
      				case '4': 
      					$("#rt-header").css("background-color", "cyan");
      				break;
      				case '3': 
      					$("#rt-header").css("background-color", "yellow");
      				break;
      				case '2': 
      					$("#rt-header").css("background-color", "purple");
      				break;      
      				case '1': 
      					$("#rt-header").css("background-color", "red");
      				break;
      				default:
      					$("#rt-header").css("background-color", "orange");
      			}
    • Last Edit: 8 years 11 months ago by Jon Buckner. Reason: add js
  • Re: Can anyone test width() and css("width")

    Posted 8 years 11 months ago

Time to create page: 0.042 seconds