I'm trying to get a slidetoggle to work properly on a div. I have html in the following format:
<div class="root-div first-service">
<div class="title-div gradient">
<div class="title-div-left">
<p>$ServiceName</p>
</div>
<div class="title-div-right">
<p>▲</p>
</div>
</div>
<div class="description-div show minimum-height">
<div class="description-content-div">
$ServiceDescription
</div>
</div>
<div class="services-image-two">
<img src="themes/theinneryou/images/ServicesImage2.jpg" alt="Missing Image"/>
</div>
</div>
I also have javascript as follows:
$('.title-div').on('click', function () {
var arrow = $(this).find('.title-div-right');
if (proceed) {
proceed = false;
$(this).closest('.root-div').find('.services-image-two').slideToggle("slow");
$(this).closest('.root-div')
.find('.description-div')
.slideToggle("slow", function () {
$(arrow).text().trim().charCodeAt(0) == 9650 ? $(arrow).html('<p>▼</p>') : $(arrow).html('<p>▲</p>');
proceed = true;
});
}
});
The effect that I get is that the image itself plays the animation of slide and then gets hidden, then the rest of the next div which contains text only gets hidden without any animation. The image is overlapping the text div as I have it under absolute positioning. You can see the live demo at tiu.azularis.com/Services
Is there a way to make them gracefuly slide together when I click the arrow and then appear together when I click the down arrow?
I also tried moving the image div inside the description div and also tried setting .delay after first animation, but neither does the trick.
Change line 83 in Services.css:
.services-wrapper .expansion-wrap .first-service .minimum-height {
/* min-height: 20.4rem; */
height: 20.4rem;
}
min-height is messing it up.
Otherwise you have to fix your HTML + CSS for that whole section because it is not ideal.
Related
I have created a way to scroll through divs, one has a menu and the others have divs with blanks but one has a video.
At the top of the page is a navigation menu that contains "next", "previous", "reload" and "start".
Those commands are warped in functions,
$("#next-item").on("click", function(){,
The page looks like this:
<div class="webcam-left">
<div class="bottom-panel">
<div class="center" id="content">
<div class="bottom-panel-post internal start"></div>
<div class="bottom-panel-post internal video-post"><video src="https://ia800606.us.archive.org/12/items/ACTV_News_open/ACTV_News_open.mp4"></video></div>
<div class="bottom-panel-post internal"></div>
</div>
</div>
</div>
<div class="nav-right nav-main">
<div class="rundown-panel">rundown</div>
<div class="rundown-items">
<div class="irl-today first"><div class="current">Welcome</div></div>
<div class="irl-today override">Category name</div>
<div class="irl-today">the end</div>
</div>
</div>
</div>
What I'm trying to do is when scrolling down the list, how do you trigger play on a video when a video is shown?
When scrolling down, I added classes to the divs that contain a video.
The left side has .override and the video side has .video-post.
I tried doing if hasClass() but it plays on the first click:
if ( $('.rundown-items').is('.override') ) {
if ($( '.bottom-panel-post' ).has('video')) {
$('video').trigger('play');
};
};
Working code - https://jsfiddle.net/openbayou/paonbxcL/8/
I figured it out, the problem was that it was looking for a class across all items and not each one individually so I added an .each function to look for a class on each individual div.
$(".slider-slide-wrap").each(function (i) {
var posLeft = $(this).position().left
var w = $(this).width();
// add shown class on a div
if (scrollLeft >= posLeft && scrollLeft < posLeft + w) {
$(this).addClass('shown').siblings().removeClass('shown');
}
// if .shown has .play-video, trigger play
if ($('.shown').is(".play-video")) {
$('video').trigger('play');
};
});
hai iam trying to place hover in an dynamic image have to show a dynamic div, if remove mouse div has to be hidden, if i over to the div after hover on image div needs to remain visible if i move out from the div it has to be hidden i tried something like this, but not working as expected, If i over to image div appears if i place mouseout tag there it hides the div once i remove the mouse couldn't use the options in the div, if i place the mouse out in div once i remove the mouse from image the div not closing, sorry for bad english as solutions for this case?
function GoView_respond(id){
console.log('hovering');
document.getElementById("pending_req_"+id).style.display="block";
}
var cl=0;
function ExitView_respond(id){
console.log('not hovering');
if(cl!=1){
document.getElementById("pending_req_"+id).style.display="none";
}
}
<a onmouseover="GoView_respond('1');" onmouseout="ExitView_respond_one('1');">over_here</a>
<div class="respond_request" style="display:none;" id="pending_req_1" >
<p class="user_details" onmouseout="ExitView_respond('1');">asdfasdfasfsdffsadfsadfasf</p>
</div>
Below code may help to solve your problem:
Javascript code:
function GoView_respond(id){
console.log('hovering');
document.getElementById("pending_req_"+id).style.display="block";
cl = 1;
}
var cl=0;
function ExitView_respond(id){
console.log('not hovering');
if(cl!=1){
cl=0;
document.getElementById("pending_req_"+id).style.display="none";
}
}
function GoView_respond_one(id) {
setTimeout(function() {
if(cl == 1) {
cl = 0;
document.getElementById("pending_req_"+id).style.display="none";
}
}, 2000);
}
}
And Html code as below
<a onmouseover="GoView_respond('1');" onmouseout="GoView_respond_one('1');">over_here</a>
<div class="respond_request" style="display:none;" id="pending_req_1" >
<p class="user_details" onmouseover="GoView_respond('1');" onmouseout="ExitView_respond('1');">asdfasdfasfsdffsadfsadfasf</p>
</div>
Demo Link for your reference.
I want a slider with content. but the content should appear only when mouse hover. This is the code I'm using:
<div id="slideshow" style="width:560px; background:#999;">
<div id="slidesContainer">
<div class="slide">
<img src="js/1.jpg" />
<div> some text </div>
</div>
<div class="slide">
<img src="js/2.jpg" />
<div> some text </div>
</div>
<div class="slide">
<img src="js/3.jpg" />
<div> some text </div>
</div>
<div class="slide">
<img src="js/4.jpg" />
<div> some text </div>
</div>
</div>
</div>
and the jquery 1.8.3 lib and this code
$(document).ready(function(){
var currentPosition = 0;
var slideWidth = 560;
var slides = $('.slide');
var numberOfSlides = slides.length;
// Remove scrollbar in JS
$('#slidesContainer').css('overflow', 'hidden');
// Wrap all .slides with #slideInner div
slides
.wrapAll('<div id="slideInner"></div>')
// Float left to display horizontally, readjust .slides width
.css({
'float' : 'left',
'width' : slideWidth
});
// Set #slideInner width equal to total width of all slides
$('#slideInner').css('width', slideWidth * numberOfSlides);
// Hide left arrow control on first load
manageControls(currentPosition);
// manageControls: Hides and Shows controls depending on currentPosition
function manageControls(position){
if(position >= 4)
{
position=0;
currentPosition=0;
}
// Hide left arrow if position is first slide
if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() }
// Hide right arrow if position is last slide
if(position==numberOfSlides-1){ $('#rightControl').hide() } else{ $('#rightControl').show() }
}
function Aplay(){
// Determine new position
currentPosition = currentPosition+1 ;
// Hide / show controls
manageControls(currentPosition);
// Move slideInner using margin-left
$('#slideInner').animate({
'marginLeft' : slideWidth*(-currentPosition)
});
setTimeout(function(){Aplay();},2000);
}
setTimeout(Aplay(),20000);
});
now the <div> some text </div> should appear only when mouse hover, example: http://www.backslash.gr/demos/contenthover-jquery-plugin/#demo4
CSS
<style type="text/css">
.title {visibility:hidden;}
</style>
HTML add a class title to all needed DIV elements
<div class="title"> some text </div>
Add this to your script
$('#slideInner').mouseover(function() {
$('#slideInner .title').css('visibility', 'visible');
});
$('#slideInner').mouseout(function() {
$('#slideInner .title').css('visibility', 'hidden');
});
Working jsBin
A simple solution would be to set up your 'slide' divs like this:
<div class="slide" onMouseOver="$('#TEXT1').css('display','block')" onMouseOut="$('#TEXT1').css('display','none')">
<img src="js/1.jpg" />
<div id="TEXT1" style="display:none;"> some text </div>
</div>
It's easy and i think this is the fastest solution, because require less jquery than the others (= keep your code clean)
Add the following class to every div which contain the description: class="slide-desc" to your HTML
Add var slideDesc = $('.slide-desc'); to your JS, which is just to fit your way of write jQuery, and slideDesc.hide(); (or $('.slide-desc').hide;, to use a faster way instead). This statement (it's better to call the .hide() method in first line of your JS, to avoid the description flashing while page is loading. Put it just after your declaration of variables.
Add somewhere in the JS these lines: $('#slidesContainer').hover(function(){
slideDesc.show();
});
You've done! :D
I am creating a website where i want to display a div on hover of a button. Currently i am able to do this but it's not the desired effect. I have created a DEMO in jsfiddle to show what i have achieved and i will paste my HTML, jQuery and only the CSS which is pertaining to this question.
HTML
<div class="cart-btn" >CART
</div>
<div class="minicart" >
Items : 5
Total : $250
VIEW CART
</div>
jQuery
$(document).ready(function () {
$(".cart-btn").hover(
function () {
$(".minicart").show(100);
}, function () {
$(".minicart").hide(2000);
});
});
CSS
.minicart {
width:164px;
display: none;
background-color:#0A3151;
opacity:0.8;
position:absolute;
z-index:9999;
margin-left:450px;
margin-top:30px;
}
ISSUE: The desired effect i want is, "The div should slide from under the button" and dissapear in the same manner".
However my main concern is that the div should remain focused even when i hover over it. Currently it disappears as soon as i take my mouse away from the button. The div once displayed should remain displayed unless the user takes the mouse away either from the div or button.
A few things to note, when using absolute positioning use top instead of margin-top and so on.
Second to avoid the popup folding up when you leave the button use the following selector:
$(".cart-btn, .minicart").hover(
function () {
$(".minicart").slideDown(100);
}, function () {
$(".minicart").slideUp(2000);
});
Use slideDown and slideUp as BeNdErR sugested, here's an updated version of his fiddle
Wrap both button and div in another div. The use this div for hover-event.
<div id="cbutt">
<div class="cart-btn" >CART
</div>
<div class="minicart">Items : 5 Total : $250 VIEW CART
</div>
</div>
$(document).ready(function () {
$("#cbutt").hover(
function () {
$(".minicart").show(100);
}, function () {
$(".minicart").hide(2000);
});
})
Here is a fiddle:
http://jsfiddle.net/Ncj2E/
Hope this is what you wanted.
My website is: http://www.grozav.com
I need help in repairing the code at the thumbnail slider part (Portfolio). If someone clicks the arrow twice, really fast, it gets off track, and the coding stops working.
HTML Markup:
<div id="portfolio">
<div id="up-arrow">UP</div>
<div id="thumbnails">
<div id="slider">
thumbnails go here
</div>
</div>
<div id="down-arrow">DOWN</div>
</div>
Jquery:
$('#up-arrow a').stop().click(function(){
if($('#slider').css("margin-top")!='0px' ){
$('#slider').stop().animate({'margin-top':'+=360px'})
$('#down-arrow').css({'background-position':'0 0px'})
$('#down-arrow a').css({'cursor':'pointer'})
//CHANGE <='PX' VALUE FOR NEXT SLIDE
if($('#slider').css("margin-top")<='-360px'){
$('#up-arrow').css({'background-position':'0 -28px'})
$('#up-arrow a').css({'cursor':'help'}) }
$('#down-arrow').css({'background-position':'0 0px'})
}
else if ($('#slider').css("margin-top")>'0px') {
$('#slider').css({'margin-top':'0px'});
}
});
$('#down-arrow a').stop().click(function(){
if($('#slider').css("margin-top")!='-720px' || $('#slider').css("margin-top")<'-720px'){
$('#slider').stop().animate({'margin-top':'-=360px'})
$('#up-arrow').css({'background-position':'0 0px'})
$('#up-arrow a').css({'cursor':'pointer'})
//CHANGE <='PX' VALUE FOR NEXT SLIDE
if($('#slider').css("margin-top")<='-360px'){
$('#down-arrow').css({'background-position':'0 -27px'})
$('#down-arrow a').css({'cursor':'help'}) }
$('#up-arrow').css({'background-position':'0 0px'})
}
else if ($('#slider').css("margin-top")<'-720px') {
$('#slider').css({'margin-top':'-360px'});
}
});
It changes the button aspect when it's at the beginning and at the end of the slides. I coded it this way due to lack of knowledge in the sliders domain.
How can I fix it, or at least prevent it from clicking twice?
Why not wrap your function in an if condition that checks to see if the slider is being animated? Then they'll only work when the animation is not occurring.
Something like if( !$('#slider').is(':animated') ){ ... your code ... }