I have a list of items with hidden content that shows/hide on hover. I'm trying to get the same functionality to work as I tab through my page. Currently, I can only get every hidden content to appear all at once.
Here's a live example of my code
jQuery:
$('#top .item .content').hover(function (e) {
$(this).children('.black-box').stop().slideToggle(300);
});
$('#top').on('keyup', function (e) {
var keyCode = e.keyCode || e.which;
var isTabbing = false;
if (keyCode == 9) {
if ($('.featured-content').find('*').is(':focus')) {
if (!isTabbing) {
isTabbing = true;
$('.featured-content .item .content .black-box').stop().slideToggle(300);
}
}
}
});
HTML:
<div id="top" class="featured-content">
<div class="item">
<h3>Tacos</h3>
<div class="content">
<img src="http://budapesttimes.hu/wp-content/themes/newsroom14/img/placeholder.png" alt="" class="image" />
<div class="black-box">
<div class="background"></div>
I love tacos!
</div>
</div>
<div class="start-btn">Start Eating</div>
</div>
<div class="item">
<h3>Pizza</h3>
<div class="content">
<img src="http://budapesttimes.hu/wp-content/themes/newsroom14/img/placeholder.png" alt="" class="image" />
<div class="black-box">
<div class="background"></div>
And Pizzzzzzaaa! P-I-Z-Z-A!
</div>
</div>
<div class="start-btn">Keep Eating</div>
</div>
<div class="item">
<h3>OMFG Naps</h3>
<div class="content">
<img src="http://budapesttimes.hu/wp-content/themes/newsroom14/img/placeholder.png" alt="" class="image" />
<div class="black-box">
<div class="background"></div>
Because you just ate a ton of food! #foodcoma
</div>
</div>
<div class="start-btn">Go to sleep</div>
</div>
</div>
I think you want to use focus and focus out to trigger your events.
$('#top').on('focus', function(){
// do something
});
$('#top').on('focusout', function(){
// do something
});
Related
I want to change selected (or default) image when users clicked other images thumbs. I tried that with below codes but dosen't work.. Where do I mistake in here ?
Here are simple jquery codes;
<script>
$('img.thumbnail').click(function () {
$('#productImage').attr('src',$(this).attr('src').replace('60/60','400/200'));
})
</script>
and html;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="col-md-5">
<img id="productImage" src='http://via.placeholder.com/400/200?text={{$product->product_name}}'>
<hr>
<div class="row">
<div class="col-xs-3">
<img src="http://via.placeholder.com/60/60?text=otherimage1">
</div>
<div class="col-xs-3">
<img src="http://via.placeholder.com/60/60?text=otherimage2">
</div>
<div class="col-xs-3">
<img src="http://via.placeholder.com/60/60?text=otherimage3">
</div>
</div>
Your img doen't contain class .thumbnail it is opposite like this,
$('.thumbnail img').click(function () {
$('#productImage').attr('src', $(this).attr('src').replace('60/60','400/200'));
});
And also check your <img> tag.
You were not calling the right selector.
$('a.thumbnail').click(function () {
$('#productImage').attr('src',$(this).children('img').attr('src').replace('60/60','400/200'));
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="col-md-5">
<img id="productImage" src='https://via.placeholder.com/400/200?text=nothing'>
<hr>
<div class="row">
<div class="col-xs-3">
<img src="https://via.placeholder.com/60/60?text=otherimage1">
</div>
<div class="col-xs-3">
<img src="https://via.placeholder.com/60/60?text=otherimage2">
</div>
<div class="col-xs-3">
<img src="https://via.placeholder.com/60/60?text=otherimage3">
</div>
</div>
Try attaching the click event to a.thumbnail elements and than do a jQuery.find('img') to get the thumbnail image's src attribute:
$('a.thumbnail').click(function () {
var src = $(this).find('img').attr('src').replace('60/60','400/200');
$('#productImage').attr('src', src);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="col-md-5">
<img id="productImage" src="http://via.placeholder.com/400/200?text=otherimage0">
<hr>
<div class="row">
<div class="col-xs-3">
<img src="http://via.placeholder.com/60/60?text=UrunResimi1">
</div>
<div class="col-xs-3">
<img src="http://via.placeholder.com/60/60?text=otherimage2">
</div>
<div class="col-xs-3">
<img src="http://via.placeholder.com/60/60?text=otherimage3">
</div>
</div>
$(document).ready(function(){
$('.thumbnail img').click(function () {
$('#productImage').attr('src',$(this).attr('src').replace('60/60','400/200'));
});
});
Your jquery selector is incorrect. It should be in this format and make sure you have document.ready function to make it work properly in all the browsers online or offline.
Plnkr Link
I'm trying this code on website but it not working at all.
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script>
var link = jQuery(location).attr('pathname');
var fullurl = jQuery(location).attr('href');
if (link.split("/")[3] === "sardines") {
console.log("fullurl = " + fullurl);
console.log("pathname = " + link);
console.log("loop sardines");
jQuery('#sardines').addClass('capik');
console.log("end addClass");
}
else if (link.split("/")[3] === "saba"){
console.log("loop saba");
jQuery('#saba').addClass('capik');
console.log("end addClass");
}
else{
console.log("end of loop");
}
<div id="all-product-categories">
<div class="all-categories">
<h2>All Categories</h2>
</div>
<div class="col-12">
<div id="sardines" class="sardines col-3">
<a href="/index.php/products/sardines" alt="Sardines">
<div class="box">
<span>SARDINES</span>
<img src="images/AYAM-product-categories/sardines.png" alt="sardines" width="150" height="150" />
</div>
</a>
</div>
<div id="saba" class="saba col-3">
<a href="/index.php/products/saba" alt="Saba">
<div class="box">
<span>SABA</span>
<img src="images/AYAM-product-categories/saba.png" alt="saba" width="150" height="150" />
</div>
</a>
</div>
<div id="mackerel" class="col-3">
<a href="/index.php/products/mackerel" alt="Mackerel">
<div class="box">
<span>MACKEREL</span>
<img src="images/AYAM-product-categories/mackerel.png" alt="saba" width="150" height="150" />
</div>
</a>
</div>
<div id="tuna" class="col-3">
<a href="/index.php/products/tuna" alt="Tuna">
<div class="box">
<span>TUNA</span>
<img src="images/AYAM-product-categories/tuna.png" alt="saba" width="150" height="150" />
</div>
</a>
</div>
</div>
<div style="clear: both;"> </div>
<div class="col-12">
<div id="bakedbeans" class="col-3">
<a href="/index.php/products/baked-beans" alt="Baked Beans">
<div class="box">
<span>BAKED BEANS</span>
<img src="images/AYAM-product-categories/baked-beans.png" alt="saba" width="150" height="150" />
</div>
</a>
</div>
<div id="coconut" class="col-3">
<a href="/index.php/products/coconut" alt="Coconut">
<div class="box">
<span>COCONUT</span>
<img src="images/AYAM-product-categories/coconut.png" alt="saba" width="150" height="150" />
</div>
</a>
</div>
<div id="fruits" class="col-3">
<a href="/index.php/products/fruits" alt="Fruits">
<div class="box">
<span>FRUITS</span>
<img src="images/AYAM-product-categories/fruits.png" alt="saba" width="150" height="150" />
</div>
</a>
</div>
<div id="vegetables" class="col-3">
<a href="/index.php/products/vegetables" alt="Vegetables">
<div class="box">
<span>VEGETABLES</span>
<img src="images/AYAM-product-categories/vegetables.png" alt="saba" width="150" height="150" />
</div>
</a>
</div>
</div>
<div style="clear: both;"> </div>
Can someone help me with this issue. The script are running fine on the site but the jQuery not adding any class on the selected id. The loop also working fine. How to make the jQuery add the new class on the selected div id. Here i'm attaching the screenshot for the console that show the script are running fine and screenshot for the html. But the class are not added into the selected one.Look like it skipping the addClass script there.
This is when i'm on sardines page.
Wrap your code with jQuery(document).ready. Your code might have been executed before the html was fully loaded. Means that your selectors got executed when the element is not present yet..
// document.ready
jQuery(document).ready(function () {
var link = jQuery(location).attr('pathname');
console.log("url = " + link);
console.log(link.split("/")[3]);
console.log(link.split("/")[3] === "sardines");
if (link.split("/")[3] === "sardines") {
console.log("loop sardines");
jQuery('#sardines').addClass('class');
console.log("end addClass");
}
else if (link.split("/")[3] === "saba"){
console.log("loop saba");
jQuery('#saba').addClass('class');
console.log("end addClass");
}
else{
console.log("end of loop");
}
})
<!-- A not working example, inspect element you see there's no class -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$("#test").addClass("test");
</script>
<div id="test">
Test
</div>
<!-- A working example, inspect element you see there's a class -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("#test").addClass("test");
});
</script>
<div id="test">
Test
</div>
Hope that helps
I just need each div to fade in once, doesn't need to fade out. Only .landing and .about fade in. .images and .contact don't fade in at all, but I can still click the invisible button on the .images div. If you need my CSS for the ids, please let me know. I'm still a JavaScript beginner, so this could be an easy fix.
<div class="landing">
<div class="content" id="fadein"> <!-- "fadein" is for my onload function -->
<div class="header">
<h1 style="margin: 0;">Placeholder</h1>
<h4 style="margin: 0;">Placeholder</h4>
</div>
<div class="down">
<a href="#about">
<img src="down.png">
</a>
</div>
</div>
</div>
<a id="about"></a>
<div class="wrapper">
<div class="content" id="fadeinclick">
<h3 style="margin: 0;">Placeholder</h3>
<h3 style="margin: 0;">Placeholder</h3>
<h3 style="margin: 0;">Placeholder</h3>
<h3 style="margin: 0;">Placeholder</h3>
<div class="down">
<a href="#images">
<img src="down.png">
</a>
</div>
</div>
</div>
<a id="images"></a>
<div class="wrapper">
<div class="content" id="fadeinclick"> <!-- first div that won't fade in -->
<h3>Images</h3>
<div class="activity">
<img src="placeholder.png"></img>
<img src="placeholder.png"></img>
<img src="placeholder.png"></img>
</div>
<div class="down">
<a href="#contact">
<img src="down.png">
</a>
</div>
</div>
</div>
<a id="contact"></a>
<div class="wrapper">
<div class="content" id="fadeinclick"> <!-- second div that won't fade in -->
<h3>Contact</h3>
<div class="activity">
<img src="placeholder.png"></img>
<img src="placeholder.png"></img>
<img src="placeholder.png"></img>
</div>
</div>
</div>
<!-- Fade scripts -->
<script>
window.onload = function() {
document.getElementById("fadein").style.opacity = 1;
}
</script>
<script>
window.onclick = function() {
document.getElementById("fadeinclick").style.opacity = 1;
}
</script>
opacity isn't a child of style, but rather a property. Just do
elem.style = "opacity:100%"
But keep in mind it won't fade. My advice?
var fade = 0
var elem = document.getElementById('imageId')
rate = 1
function step() {
fade = fade + 1
}
function start() {
if (fade < 100) {
step()
setInterval(function() {start}, rate)
};
};
I'm trying to get my div element to change pictures. The problem I'm having is that all the div that I've selected are changing. I've tried the .each() function but I haven't been able to get it to work.
$('.product_category_item div').hover(function() {
$('.main_image').each(function() {
$(this).css("display", "none");
});
$('.hover_image').each(function() {
$(this).css("display", "block");
});
}, function() {
$('.main_image').each(function() {
$(this).css("display", "block");
});
$('.hover_image').each(function() {
$(this).css("display", "none");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-lg-3 product_category_item">
<a href="taps.html">
<div>
<img class="main_image" src="img/water-faucet1.jpg">
<img class="hover_image" src="img/gold-faucet1.jpg">
<p>
taps
</p>
</div>
</a>
</div>
<div class="col-lg-3 product_category_item">
<div>
<img class="main_image" src="img/block_seal.jpg">
<img class="hover_image" src="img/round_seal.jpg">
<p>
seals
</p>
</div>
</div>
<div class="col-lg-3 product_category_item">
<div>
<img class="main_image" src="img/hinge1.jpg">
<img class="hover_image" src="img/hinge2.jpg">
<p>
hinges
</p>
</div>
</div>
<div class="col-lg-3 product_category_item">
<div>
<img class="main_image" src="img/handle1.jpg">
<img class="hover_image" src="img/handle2.jpg">
<p>
handles
</p>
</div>
</div>
Try changing your code to below.
$('.product_category_item div').hover(function(){
$(this).find('.main_image').hide();
$(this).find('.hover_image').show();
}, function(){
$(this).find('.main_image').show();
$(this).find('.hover_image').hide();
});
I am creating a page that has 4 different sections. In each section there are 2 buttons that hide/show 2 different divs. Right now it only works on the top div and when you click the buttons in the other 3 divs, they open the top div. The content is being pulled from wordpress posts. Here is the javascript I am using.
$(document).ready(function() {
$('.expander').on('click', function() {
if ($('#TableData').is(":visible")) {
$('#TableData').hide();
} else {
$('#TableData').show();
}
$('#TableData2').hide();
return false;
});
$('.expander2').on('click', function() {
if ($('#TableData2').is(":visible")) {
$('#TableData2').hide();
} else {
$('#TableData2').show();
}
$('#TableData').hide();
return false;
});
});
Here is the html:
<div class="popup-open">
<div class="icons-large"></div>
<div class="icons-large"></div>
<div class="title">Title</div>
WHAT'S IN THE BAG</br>
PLAYER HISTORY
</div>
</div>
<div id="TableData">
<div class="slidingDiv">
<div id="tabs-1">
<div class="witb-tab">
<div class="row">
<a target="_blank" href="#">
<div class="image">
<img src="#" alt="">
<a target="_blank" class="product-name" href="" title=">">
</a>
</div>
</a>
</div>
</div>
CLOSE
</div>
</div>
</div>
<div id="TableData2">
<div class="slidingDiv2">
<div class="column left">
<!-- post thumbnail -->
<!-- /post thumbnail -->
<div class="player-biography">
</div>
</div>
<div class="column right">
<div id="tabs-2">
<div class="content-wrap"></div>
</div>
CLOSE
</div>
</div>
</div>