I just set up the following jQuery code and it's working fine, however I have a feeling it can be refined into a much shorter loop with a counter. I am just familiar enough with jQuery to know this is a possibility but get stuck on the syntax etc. Thank you, and let me know if you need more specifics.
$(".moviethumb:eq(0)").on("mouseover",
function () {
$(".moviedetail:eq(0), .hoverarrow:eq(0)").show();
$(".moviedetail:eq(1), .moviedetail:eq(2)").hide();
}
);
$(".moviedetail_wrapper:eq(0)").on("mouseleave",
function () {
$(".moviedetail:eq(0), .hoverarrow:eq(0)").hide();
}
);
$(".movieout:eq(0)").on("mouseout",
function () {
$(".moviedetail:eq(0), .hoverarrow:eq(0)").hide();
}
);
$(".moviethumb:eq(1)").on("mouseover",
function () {
$(".moviedetail:eq(1), .hoverarrow:eq(1)").show();
$(".moviedetail:eq(0), .moviedetail:eq(2)").hide();
}
);
$(".moviedetail_wrapper:eq(1)").on("mouseleave",
function () {
$(".moviedetail:eq(1), .hoverarrow:eq(1)").hide();
}
);
$(".movieout:eq(1)").on("mouseout",
function () {
$(".moviedetail:eq(1), .hoverarrow:eq(1)").hide();
}
);
$(".moviethumb:eq(2)").on("mouseover",
function () {
$(".moviedetail:eq(2), .hoverarrow:eq(2)").show();
$(".moviedetail:eq(1), .moviedetail:eq(0)").hide();
}
);
$(".moviedetail_wrapper:eq(2)").on("mouseleave",
function () {
$(".moviedetail:eq(2), .hoverarrow:eq(2)").hide();
}
);
$(".movieout:eq(2)").on("mouseout",
function () {
$(".moviedetail:eq(2), .hoverarrow:eq(2)").hide();
}
);
HTML:
<ul class="movies-holder">
<li>
<a href="#">
<div class="movieout"></div>
<div class="moviethumb">
<img src="theimage.jpg />
</div>
</a>
<div class="moviedetail_wrapper">
<div class="hoverarrow"></div>
<div class="moviedetail">
<p>The movie details.</p>
</div>
</div>
</li>
<li>
<a href="#">
<div class="movieout"></div>
<div class="moviethumb">
<img src="theimage.jpg />
</div>
</a>
<div class="moviedetail_wrapper">
<div class="hoverarrow"></div>
<div class="moviedetail">
<p>The movie details.</p>
</div>
</div>
</li>
<li>
<a href="#">
<div class="movieout"></div>
<div class="moviethumb">
<img src="theimage.jpg />
</div>
</a>
<div class="moviedetail_wrapper">
<div class="hoverarrow"></div>
<div class="moviedetail">
<p>The movie details.</p>
</div>
</div>
</li>
</ul>
$(".moviethumb").on("mouseover",
function () {
var index = $(".moviethumb").index(this);
$(".moviedetail, .moviedetail").hide();
$(".moviedetail:eq(" + index + "), .hoverarrow:eq(" + index + ")").show();
}
);
$(".movedetail_wrapper").on('mouseleave', function () {
$(this).find('.moviedetail, .hoverarrow').hide();
});
.movieout can be handled in a similar fasion as the first function. Essentially, you can get the index you want to use dynamically.
I solve this using CSS.
1) Give all divs an unique id="movie321"
2) Generate CSS rule for each.
ul.movies-holder li { display: block; }
ul.movies-holder.show320 li.movie320 { display: block; }
ul.movies-holder.show321 li.movie321 { display: block; }
3) In onmouseover:
document.getElementById('movies-holder').className = 'movies-holder show321';
This is way faster than looping in JavaScript.
Try something like this:
$(".moviethumb").on("mouseover", function() {
$(".moviedetail").hide();
$(this).parents("li").find(".moviedetail").show();
});
$(".moviedetail_wrapper").on("mouseleave", function() {
$(this).parents("li").find(".moviedetail, .hoverarrow").hide();
});
$(".movieout").on("mouseout", function() {
$(this).parents("li").find(".moviedetail, .hoverarrow").hide();
});
using $(this).parents("li") you are looking for ancestors that are . Then finding the class within that parent. You don't need to iterate.
Related
this if my first question here, so sorry for any mistake or if the question is too silly.
*I have a Class with a method that displays a country-card on screen. I need to add an onclick function to save the name of the country so I can access to it from another page. i don't know if there is a way to make it work.
Any ideas?
class UI {
constructor() {
this.cardsContainer = document.querySelector("#cards-container");
}
showCountries(data) {
data.forEach(country => {
let div = `
<div class="card">
// this is the onclick function i need to access
<a onclick="countrySelected(${this.country.borders})">
<div class="card-image">
<img src=${country.flag} alt="">
</div>
<div class="card-info">
<h2 class="card-name"> ${country.name}</h2>
<p><strong>Population:</strong> ${country.population}</p>
<p><strong>Region:</strong> ${country.region}</p>
<p><strong>Capital:</strong> ${country.bogota}</p>
</div>
</a>
</div>
`;
this.cardsContainer.innerHTML += div;
})
}
//method
countrySelected(data) {
sessionStorage.setItem('country', data);
}
}
I assume that the country.name is unique.
class UI {
constructor() {
this.cardsContainer = document.querySelector("#cards-container");
}
showCountries(data) {
data.forEach(country => {
let div = `
<div class="card">
// this is the onclick function i need to access
<a id=${country.name}>
<div class="card-image">
<img src=${country.flag} alt="">
</div>
<div class="card-info">
<h2 class="card-name"> ${country.name}</h2>
<p><strong>Population:</strong> ${country.population}</p>
<p><strong>Region:</strong> ${country.region}</p>
<p><strong>Capital:</strong> ${country.bogota}</p>
</div>
</a>
</div>
`;
this.cardsContainer.innerHTML += div;
document.querySelector(`a[id="${country.name}"]`)
.addEventListener('click', () => countrySelected(country.borders));
})
}
//method
countrySelected(data) {
sessionStorage.setItem('country', data);
}
}
Also, you can refer to this post: Setting HTML Button`onclick` in template literal
I have some javascript function - shows me a popup with some texts. I try to rotate two "section" elements, but if I add to HTML one more section with class custom, the page shows only first element. Please, help me to add 1-2 more elements and to rotate it. The idea is to have 2 or more elements with class custom and to show it in random order, after last to stop. Thanks.
setInterval(function () {
$(".custom").stop().slideToggle('slow');
}, 2000);
$(".custom-close").click(function () {
$(".custom-social-proof").stop().slideToggle('slow');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="custom">
<div class="custom-notification">
<div class="custom-notification-container">
<div class="custom-notification-image-wrapper">
<img src="checkbox.png">
</div>
<div class="custom-notification-content-wrapper">
<p class="custom-notification-content">
Some Text
</p>
</div>
</div>
<div class="custom-close"></div>
</div>
</section>
Set section display none of page load instead of first section. Check below code of second section:
<section class="custom" style=" display:none">
<div class="custom-notification">
<div class="custom-notification-container">
<div class="custom-notification-image-wrapper">
<img src="checkbox.png">
</div>
<div class="custom-notification-content-wrapper">
<p class="custom-notification-content">
Mario<br>si kupi <b>2</b> matraka
<small>predi 1 chas</small>
</p>
</div>
</div>
<div class="custom-close"></div>
</div>
</section>
And you need to make modification in your jQuery code as below:
setInterval(function () {
var sectionShown = 0;
var sectionNotShown = 0;
$(".custom").each(function(i){
if ($(this).css("display") == "block") {
sectionShown = 1;
$(this).slideToggle('slow');
} else {
if (sectionShown == 1) {
$(this).slideToggle('slow');
sectionShown = 0;
sectionNotShown = 1;
}
}
});
if (sectionNotShown == 0) {
$(".custom:first").slideToggle('slow');
}
}, 2000);
Hope it helps you.
I'm a beginner to JavaScript. The lines of code that I've written in JavaScript are working for individual actions that happens in the HTML part but I want to make it as a single function which can handle all the cases actions that happens in the HTML part.
How to make one JavaScript function which can be used for different separate actions which has similar lines of code but different HTML classes?
HTML -
<div class="first" class="row">
<div>
<div class="first1">
<img class="first_img" src="assets/imgs/01.png"/>
</div>
<div class="first2">
<h4 class="first_title"><b> life... </b></h4>
<p class="first_content"> thinking, feelings, emotions, meanings, and values. </p>
<button class="btn"> <img src="assets/imgs/Icons-06.png"> </button>
<button class="btn_replace"> <img src="assets/imgs/Icons-07.png"> </button>
</div>
</div>
</div>
<div class="second" class="row">
<div class="second1">
<div class="second2">
<div class="second_title">
<h5><b> questions... </b></h5>
</div>
<div class="second_content" style="">
<div>
<p> Human thinking involves asking questions and getting answers.
</p>
</div>
<button class="second-btn" style=""> <img src="assets/imgs/Icons-06.png"> </button>
<button class="secondbtn_replace"> <img src="assets/imgs/Icons-07.png"> </button>
</div>
</div>
</div>
<div>
<img class="second_img" src="assets/imgs/02.png" style="" />
</div>
</div>
Javascript -
$(document).ready(function () {
$('.firstsub').hide();
$('.second-sub').hide();
$('.firstbtn').click (function (event)
{
$('.firstsub').toggle('show');
});
// if (javascript(window).width() > 500) {
$('.second-btn').click (function (event)
{
$('.second-sub').toggle('show');
});
});
$(document).ready(function () {
$('.firstbtn_replace').hide();
$('.secondbtn_replace').hide();
$('.firstbtn').click (function (event)
{
$('.firstbtn').addClass('hide');
$('.firstbtn_replace').show();
});
$('.firstbtn_replace').click (function (event)
{
$('.firstsub').toggle('show');
$('.firstbtn').removeClass('hide');
$('.firstbtn_replace').hide();
});
// if (javascript(window).width() > 500) {
$('.second-btn').click (function (event)
{
$('.second-btn').addClass('hide');
$('.secondbtn_replace').show();
});
$('.secondbtn_replace').click (function (event)
{
$('.second-sub').toggle('show');
$('.second-btn').removeClass('hide');
$('.secondbtn_replace').hide();
});
});
First off, You have to clean up your code. Everything there can be written in one $(document).ready()
$(document).ready(function () {
$('.firstsub').hide();
$('.second-sub').hide();
$('.firstbtn_replace').hide();
$('.secondbtn_replace').hide();
$('.firstbtn').click (function (event) {
$('.firstsub').toggle('show');
$('.firstbtn').addClass('hide');
$('.firstbtn_replace').show();
});
$('.firstbtn_replace').click (function (event) {
$('.firstsub').toggle('show');
$('.firstbtn').removeClass('hide');
$('.firstbtn_replace').hide();
});
// if (javascript(window).width() > 500) {
$('.second-btn').click (function (event) {
$('.second-sub').toggle('show');
$('.second-btn').addClass('hide');
$('.secondbtn_replace').show();
});
$('.secondbtn_replace').click (function (event) {
$('.second-sub').toggle('show');
$('.second-btn').removeClass('hide');
$('.secondbtn_replace').hide();
});
});
Second, You can pass parameters to functions that happen often. For example
function hideClasses(classes) {
for(var i = 0; i < classes.length; i++ ) {
$(classes[i]).hide();
}
}
Call it like this, passing in the classes to be hidden as an array.
hideClasses(['.firstsub', '.second-sub']);
or take for example the click action of each button.
function buttonClicked(class) {
$(class).toggle('show');
$(class).removeClass('hide');
$(class).hide();
}
So your $('.firstbtn_replace').click() can be this
$('.firstbtn_replace').click (function (event) {
buttonClicked('.firstbtn_replace');
});
The same goes for $('.secondbtn_replace').click()
$('.secondbtn_replace').click (function (event) {
buttonClicked('.firstbtn_replace');
});
You can do the same for $('.firstbtn').click() and $('.secondbtn').click()
The ending result will be
$(document.ready(function() {
function hideClasses(classes) {
for(var i = 0; i < classes.length; i++ ) {
$(classes[i]).hide();
}
}
function replaceButtonClicked(className) {
$(className).toggle('show');
$(className).removeClass('hide');
$(className).hide();
}
function normalButtonClicked(className) {
$(className).toggle('show');
$(className).addClass('hide');
$(className).hide();
}
hideClasses(['.firstsub', '.second-sub', '.firstbtn_replace', '.secondbtn_replace']);
$('.firstbtn').click (function (event) {
normalButtonClicked('.firstbtn');
}
$('.secondbtn').click (function (event) {
normalButtonClicked('.secondbtn');
}
$('.firstbtn_replace').click (function (event) {
normalButtonClicked('.firstbtn_replace');
}
$('.secondbtn_replace').click (function (event) {
replaceButtonClicked('.secondbtn_replace');
}
});
Or instead of writing the classes each time you can the function, you can pass in the jQuery object itself.
Ending in this as a final result.
$(document.ready(function() {
function hideClasses(classes) {
for(var i = 0; i < classes.length; i++ ) {
$(classes[i]).hide();
}
}
// obj refers to the jQuery object the clicked was called on
function replaceButtonClicked(obj) {
obj.toggle('show');
obj.removeClass('hide');
obj.hide();
}
// obj refers to the jQuery object the clicked was called on
function normalButtonClicked(class) {
obj.toggle('show');
obj.addClass('hide');
obj.hide();
}
hideClasses(['.firstsub', '.second-sub', '.firstbtn_replace', '.secondbtn_replace']);
// this refers to the jQuery object the clicked was called on
$('.firstbtn').click (function (event) {
normalButtonClicked(this);
}
// this refers to the jQuery object the clicked was called on
$('.secondbtn').click (function (event) {
normalButtonClicked(this);
}
// this refers to the jQuery object the clicked was called on
$('.firstbtn_replace').click (function (event) {
normalButtonClicked(this);
}
// this refers to the jQuery object the clicked was called on
$('.secondbtn_replace').click (function (event) {
replaceButtonClicked(this);
}
});
You could do something similar to below. the event parameter that gets passed with a click event has a plethora of information. Use it and a switch statement to determine what you want to do.
$(document).ready(function() {
$('.firstsub').hide();
$('.second-sub').hide();
$('.firstbtn').click(clickHandler(event));
$('.second-btn').click(clickHandler(event));
});
function clickHandler(event){
//event param will have all the details about who and what was clicked
switch(/*event or something in event*/){ //switch over details of the event and manage them all here
}
}
<div class="first" class="row">
<div>
<div class="first1">
<img class="first_img" src="assets/imgs/01.png"/>
</div>
<div class="first2">
<h4 class="first_title"><b> life... </b></h4>
<p class="first_content"> thinking, feelings, emotions, meanings, and values. </p>
<button class="btn"> <img src="assets/imgs/Icons-06.png"> </button>
<button class="btn_replace"> <img src="assets/imgs/Icons-07.png"> </button>
</div>
</div>
</div>
<div class="second" class="row">
<div class="second1">
<div class="second2">
<div class="second_title">
<h5><b> questions... </b></h5>
</div>
<div class="second_content" style="">
<div>
<p> Human thinking involves asking questions and getting answers.
</p>
</div>
<button class="second-btn" style=""> <img src="assets/imgs/Icons-06.png"> </button>
<button class="secondbtn_replace"> <img src="assets/imgs/Icons-07.png"> </button>
</div>
</div>
</div>
<div>
<img class="second_img" src="assets/imgs/02.png" style="" />
</div>
</div>
I want to check if an element is visible and play a song only when it is, using: a trigger('click') event handler.
Unfortunately, I can't get it working as expected.
What am I doing wrong and how can I fix it?
Here is my JavaScript code (jQuery):
$('.overlay').on('click', function () {
if ($('a.icon-play').is(':hidden') == false) {
$('#stop').trigger('click');
} else {
$('#play').trigger('click');
}
});
Below is my HTML code:
<div class="info">
<div class="player-home-video">
<audio id="yourownlullaby-audio" src="uploads/downloads/Buenas%20%20Noches%20%3C?php%20echo%20$_POST['name'];%20?%3E.mp3"></audio>
</div>
<div class="thumbnail-home-video">
<a href="#" id="play">
<span class="icon-play preview-icon" id="play"></span>
</a>
<a href="#" id="stop">
<span class="icon-pause preview-icon" id="stop"></span>
</a>
<img class="info" src="img/thumbnail-home-video.png" />
<div class="overlay"></div>
</div>
</div>
$('.overlay').on('click', function () {
if ($('a .icon-play').is(':hidden') == true) {
$('#stop').trigger('click');
}
else
{
$('#play').trigger('click');
} });
Your​ if should be the other way.
I have this in my page:
<div id="container">
<div>
<p>...</p>
<a href="#" class></a>
</div>
<div>
<p>...</p>
</div>
<div>
<p>...</p>
<a href="#" class></a>
</div>
</div>
Now, I want some codes to execute when each of the a elements changes its class. This doesn't work:
$('#food_container').click( function() {
if ($('#food_container a').attr('class') == "checked") {
/* some codes */
}
});
How to fix this? Thanks!
You are using wrong id in the selector. Change
$('#food_container').click( function() {
if ($('#food_container a').attr('class') == "checked") {
/* some codes */
}
});
to
$('#container').click( function() {
if ($('#container a').hasClass('checked')) {
/* some codes */
}
});
You can use .hasClass() to see if any of the elements have the class:
if ($('#container a').hasClass('checked')) {
// ...
To see if all of them have the class:
if ($('#container a').length = $('#container a.checked').length) {
// ...
var links = $("#container").children("a");
$(links).each(function(i,v){
if($(this).hasClass("checked")){
}
});