We Keep Coding

JQuery .width() returns inconsistent values

I try to get the width of a specific element with JQuery.
Sometimes, .width() returns the right value, sometimes one that is too little (this happens random on a few page loads)
So most of the time I get the right value when I load my page, but sometimes something gets messed up.
I thought, that my code firing too early (when css is not loaded or something similar) might cause this, but even after I started to use $(window).bind("load", function(){ ... code goes here ...}), the situation hasn't really changed.
My code:
$(document).ready(function () {
$(".section-content .feature-details").each(function (index, object) {
var featureDetails = $(object);
featureDetails.find(".details-content").width(featureDetails.find(".details-navigation").width());
console.log(featureDetails.find(".details-navigation").width());
});
EDIT:
(If I do a setTimeout, everything works fine, so this problem has to be related to some form of async loading, which isn't "fast enough" - right?)
The exact code I use:
JavaScript:
$(document).ready(function () {
// setTimeout(function () {
$(".section-content .feature-details").each(function (index, object) {
var featureDetails = $(object);
featureDetails.find(".details-content").width(featureDetails.find(".details-navigation").width());
console.log(featureDetails.find(".details-navigation").width());
});
// }, 100);
});
HTML:
<div class="feature columns columns-justify-fullwidth columns-vertical-align-center">
<div class="feature-details">
<div class="details-navigation">
<ul>
<li><div>Web</div></li>
<li class="active"><div>Desktop</div></li>
<li><div>Mobile</div></li>
<li><div>Datenbanken</div></li>
</ul>
</div>
<div class="details-content">
<p>
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
<br/>
<br/> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
</p>
</div>
</div>
<div class="showcase"></div>
</div>
CSS:
.columns {
display: flex;
}
.columns-justify-fullwidth {
justify-content: space-between;
}
.columns-vertical-align-center {
align-items: center;
}
.feature-details .details-navigation {
display: inline-block;
}
.feature-details .details-navigation ul {
display: inline-block;
height: 50px;
border-bottom: 2px solid #aaa;
}
.feature-details .details-navigation li {
height: 100%;
display: inline-block;
vertical-align: top;
}
.feature-details .details-navigation li:not(:last-child) {
margin-right: 18px;
}
.feature-details .details-navigation ul a {
display: table;
height: 100%;
font-size: 16px;
}
.feature-details .details-navigation ul a > div {
display: table-cell;
padding-bottom: 12px;
vertical-align: bottom;
}
/*
.feature-details .details-navigation ul li:hover {
border-bottom: 2px solid #222;
}
*/
.feature-details .details-navigation ul li:hover a {
color: #222;
}
.feature-details .details-navigation li.active {
border-bottom: 2px solid #222;
}
.feature-details .details-content {
margin-top: 16px;
}
.feature .showcase {
width: 450px;
height: 450px;
background-color: #f7f7f7;
}

Try using jQuery $( document ).ready and see if the results are more consistent. I am not able to get any inconsistent widths.
$(document).ready(function() {
$(".feature-details").each(function(index, object) {
var featureDetails = $(object);
featureDetails.find(".details-content").width(featureDetails.find(".details-navigation").width());
console.log(featureDetails.find(".details-navigation").width());
})
})

How to add a class to the div when article visible on screen?

I am displaying articles horizontally on the mouse wheel. I have to display the menu div on top when articles 5 comes on the screen. I mean I want to add class to the element when it gets visible on screen when scrolling. I tried some script but it not working.
I set display:none on the class .about_menu and using the script I am adding the class .active display: block but how can I identify the articles 05 come on screen?
Would you help me out in this?
$(window).on('scroll', function(){
if ($(".active_05").is(':visible')){
$(".about_menu").addClass("active");
}
});
(function() {
function scrollHorizontally(e) {
e = window.event || e;
var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
document.getElementById('gentags').scrollLeft -= (delta*40); // Multiplied by 40
e.preventDefault();
}
if (document.getElementById('gentags').addEventListener) {
// IE9, Chrome, Safari, Opera
document.getElementById('gentags').addEventListener("mousewheel", scrollHorizontally, false);
// Firefox
document.getElementById('gentags').addEventListener("DOMMouseScroll", scrollHorizontally, false);
} else {
// IE 6/7/8
document.getElementById('gentags').attachEvent("onmousewheel", scrollHorizontally);
}
})();
#gentags {
position:relative;
margin-top: -.25em;
display: inline-block;
width: 100%;
overflow-x: scroll;
overflow-y: hidden;
}
#gentags > div{
overflow: hidden;
width:200%;
}
::-webkit-scrollbar {
width: 0px; /* remove scrollbar space */
background: transparent; /* optional: just make scrollbar invisible */
}
/* optional: show position indicator in red */
::-webkit-scrollbar-thumb {
background: transparent;
}
.horizontal_scroll .full_screen_100 article{
width: 16.58%;
height: 100%;
float:left;
border-left: solid 1px #E2E2E2;
}
.active{
display: block !important;
}
.about_menu{
position: fixed;
width: 100%;
text-align: center;
display: none;
}
.about_menu .about_menu_wrapper ul.about_menu_list{
list-style: none;
text-decoration: none;
}
.about_menu .about_menu_wrapper ul.about_menu_list li{
display: inline-block;
text-decoration: none;
margin: 10px;
}
.about_menu .about_menu_wrapper ul.about_menu_list li a{
font-size: 18px;
color: red
}
.about_menu .about_menu_wrapper ul.about_menu_list li a:hover{
color: #000;
}
<div class="about_menu">
<div class="about_menu_wrapper">
<ul class="about_menu_list">
<li>About us</li>
<li>Team</li>
<li>Clients</li>
</ul>
</div>
</div>
<div id="gentags">
<div class="horizontal_scroll">
<div class="full_screen_100" id="left_scroll">
<article><div><p class="scroll_number">01</p><span class="page_slogan">Lorem ipsum dolor sit amet, </span></div></article>
<article><div><p class="scroll_number">02</p><span class="page_slogan">Lorem ipsum dolor sit amet, </span></div></article>
<article><div><p class="scroll_number">03</p><span class="page_slogan">Lorem ipsum dolor sit amet, </span></div></article>
<article><div><p class="scroll_number">04</p><span class="page_slogan">Lorem ipsum dolor sit amet, </span></div></article>
<article class=" active_05"><div><p class="scroll_number">05</p><span class="page_slogan">Lorem ipsum dolor sit amet, </span></div></article>
<article><div><p class="scroll_number">06</p><span class="page_slogan">Lorem ipsum dolor sit amet, </span></div></article>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Try this https://jsfiddle.net/wy9o3oh8/1/
Find right side offset of the active_05 if it is >0 then show menu
var rt = ($(window).width() - ($(".active_05").offset().left ));
if(rt>0)
{
$(".about_menu").addClass("active");
}
(function() {
function scrollHorizontally(e) {
e = window.event || e;
var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
document.getElementById('gentags').scrollLeft -= (delta*40); // Multiplied by 40
var rt = ($(window).width() - ($(".active_05").offset().left ));
if(rt>200)
{
$(".about_menu").addClass("active");
}
else
{
$(".about_menu").removeClass("active");
}
e.preventDefault();
}
if (document.getElementById('gentags').addEventListener) {
// IE9, Chrome, Safari, Opera
document.getElementById('gentags').addEventListener("mousewheel", scrollHorizontally, false);
// Firefox
document.getElementById('gentags').addEventListener("DOMMouseScroll", scrollHorizontally, false);
} else {
// IE 6/7/8
document.getElementById('gentags').attachEvent("onmousewheel", scrollHorizontally);
}
})();
#gentags {
position:relative;
margin-top: -.25em;
display: inline-block;
width: 100%;
overflow-x: scroll;
overflow-y: hidden;
}
#gentags > div{
overflow: hidden;
width:200%;
}
::-webkit-scrollbar {
width: 0px; /* remove scrollbar space */
background: transparent; /* optional: just make scrollbar invisible */
}
/* optional: show position indicator in red */
::-webkit-scrollbar-thumb {
background: transparent;
}
.horizontal_scroll .full_screen_100 article{
width: 16.58%;
height: 100%;
float:left;
border-left: solid 1px #E2E2E2;
}
.active{
display: block !important;
}
.about_menu{
position: fixed;
width: 100%;
text-align: center;
display: none;
}
.about_menu .about_menu_wrapper ul.about_menu_list{
list-style: none;
text-decoration: none;
}
.about_menu .about_menu_wrapper ul.about_menu_list li{
display: inline-block;
text-decoration: none;
margin: 10px;
}
.about_menu .about_menu_wrapper ul.about_menu_list li a{
font-size: 18px;
color: red
}
.about_menu .about_menu_wrapper ul.about_menu_list li a:hover{
color: #000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="about_menu">
<div class="about_menu_wrapper">
<ul class="about_menu_list">
<li>About us</li>
<li>Team</li>
<li>Clients</li>
</ul>
</div>
</div>
<div id="gentags">
<div class="horizontal_scroll">
<div class="full_screen_100" id="left_scroll">
<article><div><p class="scroll_number">01</p><span class="page_slogan">Lorem ipsum dolor sit amet, </span></div></article>
<article><div><p class="scroll_number">02</p><span class="page_slogan">Lorem ipsum dolor sit amet, </span></div></article>
<article><div><p class="scroll_number">03</p><span class="page_slogan">Lorem ipsum dolor sit amet, </span></div></article>
<article><div><p class="scroll_number">04</p><span class="page_slogan">Lorem ipsum dolor sit amet, </span></div></article>
<article class=" active_05"><div><p class="scroll_number">05</p><span class="page_slogan">Lorem ipsum dolor sit amet, </span></div></article>
<article><div><p class="scroll_number">06</p><span class="page_slogan">Lorem ipsum dolor sit amet, </span></div></article>
</div>
</div>
</div>
From your comment check this updated version
https://jsfiddle.net/wy9o3oh8/3/
change the value of 50 how you want

Animating content from a div that is displayed inside another div

Really new to jquery, so any help appreciated it.
Trying to solve a design challenge. I needed to display the content from a div inside another div, on hover of a third element.
Found some code that helped me put it together, but I wonder if there is a way to animate (slidedown, fadein, etc.) the content when is displayed.
Any idea how can I apply animation to the .html function when it displays the content?
var divContent = $("#explore-agility-content").html('');
$( ".industry" ).hover(
function() {
$("#explore-agility-content").html( $( this).find("#shortdesc").html() );
},
function() {
$("#explore-agility-content").html( divContent );
}
);
https://jsfiddle.net/rnwebdesigner/3wyrwd92/71/

Here are fadeIn fadeOut effects on hover and mouseout
check this fiddle
https://jsfiddle.net/parthjasani/3wyrwd92/72/
var divContent = $("#explore-agility-content").html('');
$(".industry").hover(
function () {
$("#explore-agility-content").html($(this).find("#shortdesc").html());
$("#explore-agility-content .wb").hide().fadeIn()
},
function () {
$("#explore-agility-content .wb").fadeOut(function () {
$("#explore-agility-content").html(divContent);
})
}
);

You can add and remove css classes which can contain several properties to be transitioned on mouse enter and leave..
See snippet below (solution 1)
$('.image').mouseenter(function(){
$(".text").addClass("animate")
});
$('.image').mouseleave(function(){
$(".text").removeClass("animate")
});
.image {
width: 50px;
height: 50px;
display: block;
background-color: red;
}
.text {
background-color: white;
padding:40px;
transition:all 0.5s;
}
.left {
display:block;
height:400px;
width: 400px;
background: url('http://i.stack.imgur.com/jGlzr.png') no-repeat 0 0 scroll;
background-color:#0C0C0C;
background-size: 100% 100%;
}
.animate{
opacity:1 !important;
padding-top:50px;
}
.noanimate{
opacity:0;
padding-top:-50px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="image"></div>
<div class="left">
<div class="text noanimate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt consequat tristique. Curabitur vestibulum semper nulla id ornare.
</div>
</div>
Solution 2 - using hover function instead of mounseenter and leave
$('.image').hover(function(){
$(".text").toggleClass("animate")
});
.image {
width: 50px;
height: 50px;
display: block;
background-color: red;
}
.text {
background-color: white;
padding:40px;
transition:all 0.5s;
}
.left {
display:block;
height:400px;
width: 400px;
background: url('http://i.stack.imgur.com/jGlzr.png') no-repeat 0 0 scroll;
background-color:#0C0C0C;
background-size: 100% 100%;
}
.animate{
opacity:1 !important;
padding-top:50px;
}
.noanimate{
opacity:0;
padding-top:-50px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="image"></div>
<div class="left">
<div class="text noanimate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt consequat tristique. Curabitur vestibulum semper nulla id ornare.
</div>
</div>

Display a Modal on button click using Jquery

I want to display my Modal on button click. Below is my code.
<input type="button" id="button1" value="Button" onclick="myFunction()"/>
<div id="openModal" class="modalDialog">
<div>
X
<h2>
Modal Box</h2>
<p>
Hello world</p>
</div>
</div>
This is my unfinished script.
<script type="text/javascript">
$(document).ready(function () {
});
</script>

show openModal div on button1 click.
$('#button1').on('click', function() {
$('#openModal').show();
});
No need of onclick="myFunction()" on button

Let's try...
Simple popup model created by using jquery, HTML, and CSS.
$(function() {
// Open Popup
$('[popup-open]').on('click', function() {
var popup_name = $(this).attr('popup-open');
$('[popup-name="' + popup_name + '"]').fadeIn(300);
});
// Close Popup
$('[popup-close]').on('click', function() {
var popup_name = $(this).attr('popup-close');
$('[popup-name="' + popup_name + '"]').fadeOut(300);
});
// Close Popup When Click Outside
$('.popup').on('click', function() {
var popup_name = $(this).find('[popup-close]').attr('popup-close');
$('[popup-name="' + popup_name + '"]').fadeOut(300);
}).children().click(function() {
return false;
});
});
body {
font-family:Arial, Helvetica, sans-serif;
}
p {
font-size: 16px;
line-height: 26px;
letter-spacing: 0.5px;
color: #484848;
}
/* Popup Open button */
.open-button{
color:#FFF;
background:#0066CC;
padding:10px;
text-decoration:none;
border:1px solid #0157ad;
border-radius:3px;
}
.open-button:hover{
background:#01478e;
}
.popup {
position:fixed;
top:0px;
left:0px;
background:rgba(0,0,0,0.75);
width:100%;
height:100%;
display:none;
}
/* Popup inner div */
.popup-content {
width: 500px;
margin: 0 auto;
box-sizing: border-box;
padding: 40px;
margin-top: 20px;
box-shadow: 0px 2px 6px rgba(0,0,0,1);
border-radius: 3px;
background: #fff;
position: relative;
}
/* Popup close button */
.close-button {
width: 25px;
height: 25px;
position: absolute;
top: -10px;
right: -10px;
border-radius: 20px;
background: rgba(0,0,0,0.8);
font-size: 20px;
text-align: center;
color: #fff;
text-decoration:none;
}
.close-button:hover {
background: rgba(0,0,0,1);
}
#media screen and (max-width: 720px) {
.popup-content {
width:90%;
}
}
<!DOCTYPE html>
<html>
<head>
<title> Popup </title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
<a class="open-button" popup-open="popup-1" href="javascript:void(0)"> Popup
Preview</a>
<div class="popup" popup-name="popup-1">
<div class="popup-content">
<h2>Model </h2>
<p>Model content will be here. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Aliquam consequat diam ut tortor
dignissim, vel accumsan libero venenatis. Nunc pretium volutpat
convallis. Integer at metus eget neque hendrerit vestibulum.
Aenean vel mattis purus. Fusce condimentum auctor tellus eget
ullamcorper. Vestibulum sagittis pharetra tellus mollis vestibulum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<a class="close-button" popup-close="popup-1" href="javascript:void(0)">x</a>
</div>
</div>
</body>
</html>

Change show() to modal.show();
$('#button1').on('click', function() {
$('#openModal').modal('show');
});

You probably have to set visibility:hidden; to the div, and set it to visible onclick

Hover a div on other div with some opacity using css

My requirement is to get a div overlapping another div at the bottom, as you can see in the first picture, and when you hover on the image I need it to get an effect like in the second image.
Here is my html code, but I don't know how to handle mouse events correctly.
<div id="container">
<div class="overlay">This is overlay div.</div>
<div class="content">This is contents div. This is contents div.</div>
</div>
#container {
position: relative;
}
.overlay,
.content{
display:block;
position: absolute;
top: 0;
left: 0;
}
.overlay,
.content{
display:block;
position: absolute;
top: 0;
left: 0;
}
But it doesn't work as I wanted. Could anyone give me some suggestions?

http://jsfiddle.net/mAzsL/
Here ya go man.
<div class="container">
<div class="lower">Blah Blah Blah</div>
<div class="show">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat elit vel tortor porta, sit amet venenatis purus condimentum. Suspendisse potenti. Aenean ultrices velit ac mattis volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae</div>
</div>
.container{
width:250px;
height:300px;
background:#00f;
position:relative;
}
.lower{
position:absolute;
bottom:0;
width:100%;
color:#fff;
padding:10px 0;
text-indent:5px;
background:rgba(0,0,0,.5);
}
.show{
display:none;
height:100%;
width:100%;
color:#000;
text-indent:5px;
background:rgba(255,255,255,.5);
}
.container:hover > .lower{
display:none;
}
.container:hover > .show{
display:block;
}
Here is a fiddle of the same thing, but with the content sliding up into place. I added this because SiKni8 asked why it did not slide up.
http://jsfiddle.net/mAzsL/15/
Essentially, I moved all content into one container, added transition on hover. Pretty simple changes.

something like
<div class="container">
<img src="http://placehold.it/150X200/fff000" />
<div class="inner">
somecontent goes here
<div class="overlay">sho on hover</div>
</div>
</div>
and
.container {
position: relative;
display: inline-block;
}
.container .inner {
position: absolute;
bottom: 0;
opacity: .85;
}
.container .inner .overlay {
display: none;
}
.container:hover .inner .overlay {
display: block;
}
Demo: Fiddle