logo
down
shadow

jQuery toggle class when div is on the left of viewport


jQuery toggle class when div is on the left of viewport

By : Chris Brighton
Date : November 17 2020, 11:55 AM
I hope this helps . I made a small FIDDLE here.
you can easily modify nearOffsetPixels if you want to add/remove detection accuracy.
code :
var lastScrollLeft = 0;
var divOffsetRight = $('#9').offset().left + $('#9').width();
var nearOffsetPixels = 5;
$(window).scroll(function() {
    var documentScrollLeft = $(document).scrollLeft();
    var documentScrollRight;
    if (lastScrollLeft != documentScrollLeft) {
        lastScrollLeft = documentScrollLeft;
        documentScrollRight = documentScrollLeft + $(window).innerWidth();
        if((documentScrollRight > divOffsetRight - nearOffsetPixels) &&
          (documentScrollRight < divOffsetRight + nearOffsetPixels)) alert('reached');
    }
});


Share : facebook icon twitter icon
Jquery to get the width between left viewport to a specific div on my page

Jquery to get the width between left viewport to a specific div on my page


By : Márcio
Date : March 29 2020, 07:55 AM
I hope this helps you . Not sure if the fiddle doesn't like my window.outerWidth line, but something like.
code :
var sizingMaskDiv = function () {
    var squareWidth = $('#square').width(),
        maskWidth = (window.outerWidth - squareWidth) / 2,
        finalWidth = maskWidth - squareWidth;

        $('#mask').css('width', finalWidth + "px");
}
// Sets initial width
sizingMaskDiv();

$(window).resize(function() {
 //on window resize, run function (can get slow)
 sizingMaskDiv();
});
CSS or jQuery to right align image in Viewport and still allow scrolling to left

CSS or jQuery to right align image in Viewport and still allow scrolling to left


By : bramos
Date : March 29 2020, 07:55 AM
help you fix your problem You might want to force the browser to scroll. Scroll it by 4800px horizontally to make sure it's on the right on every device. Or just use the image's width instead of specifiying a number.
code :
<script type="text/javascript">
    window.scrollTo(4800,0);
</script>
Can't toggle from right to left Jquery

Can't toggle from right to left Jquery


By : user3765512
Date : March 29 2020, 07:55 AM
wish of those help Okay This is how I solved my problem. One thing was missing in it!
code :
.slide_birthday_click{
      margin-top: 2%;
      padding: 5px;
      background: grey;
      height: auto;
      display:none;
      position:absolute;
      z-index: 5;
      float: right;
      right: 0;
    }
How to toggle a div from right to left in jquery

How to toggle a div from right to left in jquery


By : morteza
Date : March 29 2020, 07:55 AM
Hope that helps I have this fiddle where I am trying to create a floating div which should toggle from right to left . , You can do it like this also. refer the working demo
code :
<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
	
</head>

<style type="text/css">

div.mydiv{
	width: 0px;
	height: 100px;
	position: absolute;
	left: 70px;
	top: 20px;
	background-color: orange;
	overflow: hidden;
	text-align: center;
	color: white;

}

#mybutton{
	width: 70px;
	height: 100px;
	color: white;
	position: absolute;
	top:20px;
	left:0px;
	background-color: black;
	color: orange;
}

</style>


<body>

<div class="mydiv">Hello StackOverflow ......</div>
<button id="mybutton">Click on me</button>

<script type="text/javascript">

var theNum = 0;

$("#mybutton").click(function(){
	theNum = theNum +1;
	
	if(theNum%2 != 0)
	{
		$("div.mydiv").animate({width:500},1000);
	}
	else
	{
		$("div.mydiv").animate({width:0},1000);
	}
});


</script>




</body>


</html>
<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
	
</head>

<style type="text/css">

div.holder{
	width: 400px;
	height: 600px;
	position: absolute;
	right: 0;

}

div.holder div.formholder{
	width: 0px;
	height: 600px;
	background-color: orange;
	position: absolute;
	right: 0;
}

#mybutton{
	width: 50px;
	height: auto;
	position: absolute;
	right: 0px;
}



</style>


<body>

<div class="holder">
	<div class="formholder"></div>
	<button id="mybutton">C<br>L<br>I<br>C<br>K<br><br> O<br>N<br> <br>M<br>E</button>
</div>

<script type="text/javascript">

var my_val = 0;
$("#mybutton").click(function(){
	my_val = my_val+1;

	if (my_val%2 != 0) 
	{
		$("div.formholder").animate({width:300},1000);
		$("#mybutton").animate({right:300},1000);
	}
	else
	{
		$("div.formholder").animate({width:0},1000);
		$("#mybutton").animate({right:0},1000);
	}
});


</script>




</body>


</html>
How can I loop through a list of elements and toggle a class on them in jQuery, with a delay in between each toggle?

How can I loop through a list of elements and toggle a class on them in jQuery, with a delay in between each toggle?


By : user3298544
Date : March 29 2020, 07:55 AM
it fixes the issue I am looking to loop through a list of elements and toggle a class on each one (.active), changing this every 4 seconds. The active class will change the background color of the icon and display it's relevant text underneath. , Please find below a working example in vanilla JS
code :
const icons = document.getElementsByClassName("fa");
const texts = document.getElementsByClassName("perk-text");
Array.from(texts).forEach(textElement => {
  textElement.style.display = "none";
});

setInterval(() => {
  const iconsArray = Array.from(icons);
  const activeIconIndex = iconsArray.findIndex(icon => icon.classList.contains("active"));
  const nextActiveIndex = (activeIconIndex + 1) % iconsArray.length
  iconsArray[nextActiveIndex].classList.add("active");
  iconsArray[activeIconIndex].classList.remove("active");
  toggleText(iconsArray[nextActiveIndex].classList);
}, 4000);


function toggleText(activeIconClasses) {
  let textIdToActivate = "";
  switch (activeIconClasses[1]) {
    case "fa-wifi":
      textIdToActivate = "wifi-text";
      break;
    case "fa-plug":
      textIdToActivate = "plug-text";
      break;
    case "fa-suitcase":
      textIdToActivate = "suitcase-text";
      break;
    case "fa-wheelchair":
      textIdToActivate = "wheelchair-text";
      break;
  }
  Array.from(texts).forEach(textElement => {
    textElement.style.display = "none";
  });
  const textElement = document.getElementById(textIdToActivate);
  textElement.style.display = "block";


}
.active {
  background-color: #74BDE9;
  color: #ffffff;
  cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/js/fontawesome.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="outer">
  <div id="inner">
    <div class="item wifi-icon"><i class="active fa fa-wifi" aria-hidden="true"></i></div>
    <div class="item plug-icon"><i class="fa fa-plug " aria-hidden="true"></i></div>
    <div class="item suitcase-icon"><i class="fa fa-suitcase" aria-hidden="true"></i></div>
    <div class="item wheelchair-icon"><i class="fa fa-wheelchair" aria-hidden="true"></i></div>
  </div>
  <div id="info">
    <div id="wifi-text" class="perk-text ">
      <h3>Free WiFi</h3>
      <p>Lorem ipsum dolor sit amet consectetur adipiscing elit</p>
    </div>
    <div id="plug-text" class="perk-text ">
      <h3>Power Sockets</h3>
      <p>Lorem ipsum dolor sit amet consectetur adipiscing elit</p>
    </div>
    <div id="suitcase-text" class="perk-text ">
      <h3>Luggage</h3>
      <p>Lorem ipsum dolor sit amet consectetur adipiscing elit</p>
    </div>
    <div id="wheelchair-text" class="perk-text ">
      <h3>Wheelchair Accessible</h3>
      <p>Lorem ipsum dolor sit amet consectetur adipiscing elit</p>
    </div>
  </div>

</div>
Related Posts Related Posts :
  • clearvalidators not working in angular 6 form control
  • Remove Count Attribute in json data
  • queue up function callbacks
  • How to stop all Soundcloud streams in once?
  • Sliding div onclick left/right
  • RequireJS JQuery shim doesnt work with VS2013
  • What is the Meteor concurrency model?
  • Events on children of contenteditable element
  • Simple jquery not working to print the input value
  • Javascript templating language in reverse
  • Making Pagination in Javascript Scalable (for large # of db results)
  • Performance of Stateless Authentication in SPA and SSO (Single Sign On)
  • Assigning a value for view asynchronously
  • Mocha JS: How to reuse assertions within a spec?
  • Is ember.js stable enough to use in a real world project?
  • jQuery Load() not loading within div
  • encode stream from webCam h264
  • Regex to find pattern, return subpattern
  • Why does this regex to remove empty <p></p> tags from a string fail?
  • Rails: pass data to javascript
  • Quickest way to check if a number is in a set?
  • Phonegap events online/offline not working
  • In HTML5, please explain the meaning of '?' in the statement
  • Form to use AJAX rather than a page refresh but also utilise error handling?
  • JQuery Script looping error
  • different size divs align top left
  • Image fade-in when webpage finishes loading
  • Seeking HTML5 audio element causes delay (breaks sync)
  • How can I read & write data to a new tab in Firefox?
  • jQuery or JS turn all words into italic type
  • iOS css -webkit-transform: scale doesn't offset touch events
  • Populate select list using javascript
  • Can you work out why my .js file doesn't seem to be linking to my html?
  • Make slideToggle effect only one element at a time
  • Output sound using JavaScript
  • What is the analytics.js equivalent of _trackPageview found in ga.js
  • How can I check if a JS file has been included already?
  • hasClass and condition not working
  • EDITED: I'm having issues with a button and its function
  • Importing XML in HTML with javascript
  • Create new function in contentScriptFile in Firefox extension
  • Should I build Node.js from source or download the OS X installer?
  • How to enforce integer sizes in JS? (TypeScript?)
  • How to update the JSON object without deleting old values using javascript
  • Reading a javascript variable containing a string into another file
  • Possible to prevent 403 errors from logging to the web console?
  • Jquery Accordion - Expand and collapse div on hover
  • jquery .hide() function - Hide mobile, Display Desktop
  • Holding password in javascript variable - security implications?
  • JQPlot trouble to render vertical stacked bar and horizontal legend
  • counts days inbetween then add class to those days with nested divs?
  • Marionette.js with Rails (Devise) Authentication
  • javascript anonymous function evaluation idiom
  • Why am I losing the decimal when working this equation in Javascript?
  • Site redirects to index.php after being open while making calls to an API using AJAX
  • How to determine when multiple callbacks are all done
  • How to update Yeoman dependencies?
  • How can I do a /resolve with the Soundcloud Javascript SDK?
  • I'm not able to call a named callback function
  • How to get value of Paragraph element contained in <div> in HTML using JavaScript
  • shadow
    Privacy Policy - Terms - Contact Us © ourworld-yourmove.org