I want to only display the next container once the previous container's child has been selected.
<section class="section-blue" id="question1">
<div class="container">
<h1 class="question-heading">Q1: WHO ARE YOU MOST LIKE?</h1>
<div class="row">
<div class="col-xs-4 text-center">
<a href="#question2"><img src="../images/1.png" class="img-rounded image-sizes" alt="Cinque Terre">
<br>
<p style="color: white;">THOMAS EDISON</p>
</a>
</div>
<div class="col-xs-4 text-center">
<a href="#question2"><img src="../images/2.png" class="img-rounded image-sizes" alt="Cinque Terre">
<br>
<p style="color: white;">ALBERT EINSTEIN</p>
</a>
</div>
<div class="col-xs-4 text-center">
<a href="#question2"><img src="../images/3.png" class="img-rounded image-sizes" alt="Cinque Terre">
<br>
<p style="color: white;">NELSON MANDELA</p>
</a>
</div>
</div>
</div>
</section>
<section class="section-red" id="question2">
<div class="container">
<h1 class="question-heading">Q2: WHAT’S YOUR PREFERENCE?</h1>
<div class="row center-block">
<div class="col-xs-4 text-center">
<a href="#question3"><img src="../images/4.png" class="img-rounded image-sizes" alt="Cinque Terre">
<br>
<p style="color: white;">CHESS</p>
</a>
</div>
<div class="col-xs-4 text-center">
<a href="#question3"><img src="../images/5.png" class="img-rounded image-sizes" alt="Cinque Terre">
<br>
<p style="color: white;">FOOTY</p>
</a>
</div>
<div class="col-xs-4 text-center">
<a href="#question3"><img src="../images/6.png" class="img-rounded image-sizes" alt="Cinque Terre">
<br>
<p style="color: white;">LEGO</p>
</a>
</div>
</div>
</div>
</section>
So question #1 should be displayed when you first open the webpage, then once you have clicked one of the pictures, it takes you to question #2. question #2 would be hidden until question #1's child has been clicked.
Have a look at my codepen here
A good example of what I am trying to achieve can be found here
https://www.randstad.co.uk/ugc/found/tech-entrepreneur-match/
I've put together a codepen which does what you'd like.
It works as follows:
Hide all sections at first with CSS
Number the sections based on their order in the dom
Show the first section
Bind a handler for each answer click to take the index of the parent section and show the next section based on that (as well as highlighting)
I added a couple of CSS classes (section, section.highlight and answer) but here's the essence:
$(() => {
init();
});
function init() {
numberSections();
bindAnswerClick();
showSection(0);
}
function numberSections() {
$(".section").each((index, elem) => {
$(elem).data("index", index);
$(elem).attr("data-index", index);
});
}
function bindAnswerClick() {
$(".answer").on("click", (e) => {
selectAnswer($(e.currentTarget));
});
}
function selectAnswer($answer) {
let $section = $answer.closest(".section");
let nextIndex = parseInt($section.data("index")) + 1;
$section.find(".answer").removeClass("highlight");
$answer.addClass("highlight");
showSection(nextIndex);
}
function showSection(index) {
$(".section[data-index='" + index + "']").show();
}
Related
I wanted to know if there was an easy way to change the div position when i refresh my browser I don't want to lose the place that I have changed to i have 3 Div (Div1 Logo - Div2 Text - Div3 Langue) I want to change Div2 and Div3 when witdh page <=765 and refresh and don't lose this position (Div1 -Div2 -Div3)
$(document).load($(window).bind("resize", listenWidth));
function listenWidth( e ) {
if($(window).width() <= 765)
{
$(".welcomeheader1").remove().insertAfter($(".welcomeheader2"));
} else {
$(".welcomeheader1").remove().insertBefore($(".welcomeheader2"));
}
}
HTML Code
<div id="header" class="header clearfix">
<div class="row clearfix">
<div class="col-lg-3 col-md-3 col-sm-6 col-4 xs-last txtRight">
<div id="headerLogo" ></div>
</div>
<div id="welcome" class="txtCenter col-lg-6 col-md-7 col-sm-12 col-12 clearfix welcomeheader1">
<!-- <img src="./resources/_images/wifi.png?1595436503" class="wifi-img" alt="WIFI" /> -->
<!--
<div class="wifi-symbol">
<div class="wifi-circle first"></div>
<div class="wifi-circle second"></div>
<div class="wifi-circle third"></div>
<div class="wifi-circle fourth"></div>
</div>
-->
<img class="wifi_welcome" src="./resources/_images/wifi_welcome.png?1590753851" alt="">
<h1 id="welcomeHeadline">WELCOME</h1>
<h2 id="connectezvous">Connectez-vous au Wifi gratuit</h2>
</div>
<div class="col-lg-3 col-md-2 col-sm-6 col-8 welcomeheader2 " align="Right">
<div id="lang_block">
<i id="showLanguages"> <span id="language_text_id">Langue</span> <img class="left_arrow" src="./resources/_images/left-arrow.png?1590753851" alt=""></i>
<div id="langContainer">
<a id="lang_link[en]" href="#" style="display:none"><img src="./resources/_images/flags/en.png?1595436503" title="English"></a>
<a id="lang_link[fr]" href="#" style="display:none"><img src="./resources/_images/flags/fr.png?1595436503" title="Français"></a>
</div>
</div>
</div>
</div>
<div class="clear"></div>
<!-- The header template -->
<!-- Will be added on top of the page -->
So call the function on load
$(document).load( function () {
listenWidth();
$(window).bind("resize", listenWidth)
});
I have tried giving id to the element which I want to style when I hover over a div. And I have given the div an "onmouseover" attribute with the value of a function which changes the style of the element, but it changes it permanently and even when my mouse isn't on the element
<div class= "container">
<div class="row">
<div class="item1 col-sm-3" ">
<a href="#">
<img class="picture" id="picture1"src="/Rimani/images/logo-tractor-removebg-preview.png">
<div class="text" onmouseover="hoverStyle()">НОВО ОБОРУДВАНЕ</div>
</a>
</div>
<div class="item2 col-sm-3" onmouseover="hoverStyle()">
<a href="#" >
<img class="picture" id="picture2" src="/Rimani/images/logo-tractor-removebg-preview.png">
<div class="text">НОВО ОБОРУДВАНЕ</div>
</a>
</div>
var hoverElements = document.getElementsByClassName('picture');
function hoverStyle() {
document.getElementById("picture1").style.filter = "hue-rotate(340deg)"
document.getElementById("picture2").style.filter = "hue-rotate(340deg)"
}
Add an onmouseout event:
<div class= "container">
<div class="row">
<div class="item1 col-sm-3" ">
<a href="#">
<img class="picture" id="picture1"src="/Rimani/images/logo-tractor-removebg-preview.png">
<div class="text" onmouseover="hoverStyle()">НОВО ОБОРУДВАНЕ</div>
</a>
</div>
<div class="item2 col-sm-3" onmouseover="hoverStyle()" onmouseout="unhoverStyle()">
<a href="#" >
<img class="picture" id="picture2" src="/Rimani/images/logo-tractor-removebg-preview.png">
<div class="text">НОВО ОБОРУДВАНЕ</div>
</a>
</div>
var hoverElements = document.getElementsByClassName('picture');
function hoverStyle() {
document.getElementById("picture1").style.filter = "hue-rotate(340deg)"
document.getElementById("picture2").style.filter = "hue-rotate(340deg)"
}
var hoverElements = document.getElementsByClassName('picture');
function unhoverStyle() {
document.getElementById("picture1").style.filter = "";
document.getElementById("picture2").style.filter = "";
}
I have a bootstrap 4 column template in mobile I want to apply clear:both based on child div character length . I mentioned the below the sample code if not clear I will briefly text on commands. Anyone help me to achieve this.
<div class="col-sm-3 col-xs-6 applyclear">
<h4 class="tileh4">Rustic</h4>
<div class="item-wrap">
<a href="http://mobilegear.my/alphatiles/product_detail/view/YLH6000C">
<span class="tiadj-img">
<img src="http://mobilegear.my/alphatiles/assets_user/product/alpha_2018-01-19845.jpg" alt="YLH6000C" class="img-responsive">
</span>
</a>
<h6>YLH6000C</h6>
</div>
</div>
<div class="col-sm-3 col-xs-6 applyclear">
<h4 class="tileh4">Rusticabcede Rusticabcede</h4>
<div class="item-wrap">
<a href="http://mobilegear.my/alphatiles/product_detail/view/YLH6000C">
<span class="tiadj-img">
<img src="http://mobilegear.my/alphatiles/assets_user/product/alpha_2018-01-19845.jpg" alt="YLH6000C" class="img-responsive">
</span>
</a>
<h6>YLH6000C</h6>
</div>
</div>
<div class="col-sm-3 col-xs-6 applyclear">
<h4 class="tileh4">Rusticabc</h4>
<div class="item-wrap">
<a href="http://mobilegear.my/alphatiles/product_detail/view/YLH6000C">
<span class="tiadj-img">
<img src="http://mobilegear.my/alphatiles/assets_user/product/alpha_2018-01-19845.jpg" alt="YLH6000C" class="img-responsive">
</span>
</a>
<h6>YLH6000C</h6>
</div>
</div>
<div class="col-sm-3 col-xs-6 applyclear">
<h4 class="tileh4">Rusticabcede</h4>
<div class="item-wrap">
<a href="http://mobilegear.my/alphatiles/product_detail/view/YLH6000C">
<span class="tiadj-img">
<img src="http://mobilegear.my/alphatiles/assets_user/product/alpha_2018-01-19845.jpg" alt="YLH6000C" class="img-responsive">
</span>
</a>
<h6>YLH6000C</h6>
</div>
</div>
The script I was tried.
if ($(window).width() < 767) {
$(document).ready(function() {
var totLength = $('.tileh4');
var charLength = totLength.text().length;
if(charLength > 3){
totLength.addClass('whitespac');
}
$('.applyclear:has(.tileh4.whitespac)').css('clear', 'both');
});
}
else {
}
sample code here
I have a slider where some of the images in the slider can have an optional photo- credit containing text or link in a popper. I would like to iterate over all of the popper instances and if all of the p tags in the .photo-credit p class are empty, then hide only that instance of the parent popper. I've tried to piece together a solution from some other posts, but have not been able to get it to work. The code I have does not hide a popper if all p tags are empty for that popper. I'm a JavaScript newbie and would appreciate any help.
HTML
<div class="slider-wrapper">
<!--Required Root Element-->
<div class="slider">
<!--Required List Element-->
<div class="slider-list">
<div class="slider-item">
<div class="slider-image-container"><img class="slider-image" src="http://www.someurl.com/Images/Homepage Images/Slider/image1.jpg" /></div>
<div class="slider-content-container">
<h1>B LIne: The Place to Be</h1>
<div class="learn-more">Learn More</div>
</div>
<div class="popper">
<img data-toggle="popover" class="photo-credit-icon" src="http://www.someurl.com/icon-photography.svg" alt="photo credit" />
</div>
<div class="photo-credit hide">
<p><p>A photo credit.</p></p>
<p></p>
</div>
</div><div class="slider-item">
<div class="slider-image-container"><img class="slider-image" src="http://www.someurl.com/Images/Homepage Images/Slider/anotherimage.jpg" /></div>
<div class="slider-content-container">
<h1>July 4th: You missed it!</h1>
<div class="learn-more">Learn More</div>
</div>
<div class="popper">
<img data-toggle="popover" class="photo-credit-icon" src="http://www.someurl.com/icon-photography.svg" alt="photo credit" />
</div>
<div class="photo-credit hide">
<p></p>
<p></p>
</div>
</div><div class="slider-item">
<div class="slider-image-container"><img class="slider-image" src="http://www.someurl.com/Images/Homepage Images/Slider/anotherimage.jpg" /></div>
<div class="slider-content-container">
<h1>Festival coming Aug. 31st!</h1>
<div class="learn-more">Learn More</div>
</div>
<div class="popper">
<img data-toggle="popover" class="photo-credit-icon" src="http://www.someurl.com/icon-photography.svg" alt="photo credit" />
</div>
<div class="photo-credit hide">
<p></p>
<p></p>
</div>
</div>
</div>
</div>
<img src="http://www.someurl.com/images/icons/icon-chevron-left-slider.svg">
<img src="http://www.someurl.com/images/icons/icon-chevron-right-slider.svg">
<p class="slider-pagination"></p>
</div>
JavaScript
$('.popper').each(function () {
//var $thisPopper = $(this);
var hasContent = 0;
$('.photo-credit p').each(function () {
if($(this).html().length > 0) {
hasContent++;
}
});
if(hasContent > 0){
//$thisPopper.hide();
$(this).hide();
}
});
You were on the right direction. However a couple mistakes in your javascript.
You tried to target all the div with "popper" class. However, the div with "popper" and "photo-credit" are on the same level. Why not targeting their parent div instead?
Try this code. It's been tested (Link to jsfiddle)
$('.slider-item').each(function () {
var thisSilerItem = $(this);
var hasContent = 0;
thisSilerItem.find('.photo-credit p').each(function () {
if($(this).html().length > 0) {
hasContent++;
}
});
if(hasContent <= 0){
thisSilerItem.find('.popper').hide();
}
});
Edit:
Bonus:
If your page has a large amount of sliders, this jquery solution will cause some UX issues ("jumpy" div on/after page load)
Try a CSS only solution.
When you render your DOM elements. Add a class to "popper" div if the content of "photo-credit" is empty.
<div class="popper hide">
// img
</div>
Then in your CSS, add
.popper.hide { display: none; }
It's hard to fully gather what you want to do, but if I understand correctly...
$('.popper').each(function () {
var photoCredit = $(this).find(".photo-credit p")
if ( $(photoCredit).is(':empty') ){
$(this).hide();
}
});
It's worth pointing out that CSS4 developers are working on a 'has' selector but as of July 2017 there is no support for any browser just yet.
It is expected to work in the following manner:
.popper:has(> p:empty) { display: none }
I hope this helps... :)
You can check this code.
$.each($('.popper'), function (index, popper) {
var isEmptry = true;
$.each($(popper).next('.photo-credit').children(), function (index, ptag) {
if ($.trim($(ptag).html()) != '')
isEmptry = false;
});
if (isEmptry)
$(popper).hide();
});
Working code
$.each($('.popper'), function (index, popper) {
var isEmptry = true;
$.each($(popper).next('.photo-credit').children(), function (index, ptag) {
if ($.trim($(ptag).html()) != '')
isEmptry = false;
});
if (isEmptry)
$(popper).hide();
});
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<div class="slider-wrapper">
<!--Required Root Element-->
<div class="slider">
<!--Required List Element-->
<div class="slider-list">
<div class="slider-item">
<div class="slider-image-container">
<img class="slider-image" src="http://www.someurl.com/Images/Homepage Images/Slider/image1.jpg" />
</div>
<div class="slider-content-container">
<h1>B LIne: The Place to Be</h1>
<div class="learn-more">Learn More</div>
</div>
<div class="popper">
<img data-toggle="popover" class="photo-credit-icon" src="http://www.someurl.com/icon-photography.svg" alt="photo credit" />
</div>
<div class="photo-credit hide">
<p>
<p>A photo credit.</p>
</p>
<p></p>
</div>
</div>
<div class="slider-item">
<div class="slider-image-container">
<img class="slider-image" src="http://www.someurl.com/Images/Homepage Images/Slider/anotherimage.jpg" />
</div>
<div class="slider-content-container">
<h1>July 4th: You missed it!</h1>
<div class="learn-more">Learn More</div>
</div>
<div class="popper">
<img data-toggle="popover" class="photo-credit-icon" src="http://www.someurl.com/icon-photography.svg" alt="photo credit" />
</div>
<div class="photo-credit hide">
<p></p>
<p></p>
</div>
</div>
<div class="slider-item">
<div class="slider-image-container">
<img class="slider-image" src="http://www.someurl.com/Images/Homepage Images/Slider/anotherimage.jpg" />
</div>
<div class="slider-content-container">
<h1>Festival coming Aug. 31st!</h1>
<div class="learn-more">Learn More</div>
</div>
<div class="popper">
<img data-toggle="popover" class="photo-credit-icon" src="http://www.someurl.com/icon-photography.svg" alt="photo credit" />
</div>
<div class="photo-credit hide">
<p></p>
<p></p>
</div>
</div>
</div>
</div>
<a href="#" class="slider-control-prev">
<img src="http://www.someurl.com/images/icons/icon-chevron-left-slider.svg"></a>
<a href="#" class="slider-control-next">
<img src="http://www.someurl.com/images/icons/icon-chevron-right-slider.svg"></a>
<p class="slider-pagination"></p>
</div>
just need some help on how to change the font color of the title for the current div being selected.
See my code below:
HTML
<div class="bar">
<div class="container">
<div class="row">
<div class="col-lg-10 col-lg-offset-1 text-center">
<p id="hideshow1" class="btn">Photography</p>
<p id="hideshow2" class="btn">Graphics</p>
<hr class="small">
</div>
</div>
</div>
</div>
<div id="photography" class="photography">
<div class="container">
<div class="col-lg-10 col-lg-offset-1 text-center">
<hr class="small">
<div class="row">
<div class="col-md-3">
<div class="photography-item">
<div class="thumbnail">
<a class="fancybox-thumbs" data-fancybox-group="photo" title="Honda City 98'" href="imgs/pics/resized/car1.jpg"><img src="imgs/pics/resized/car1.jpg" alt="" /></a>
</div>
</div>
</div>
<hr class="small">
</div>
</div>
</div>
<div class="bar">
<div class="container">
<div class="row">
<div class="col-lg-10 col-lg-offset-1 text-center">
<p id="hideshow1" class="btn">Photography</p>
<p id="hideshow2" class="btn">Graphics</p>
<hr class="small">
</div>
</div>
</div>
</div>
<div id="graphics" class="graphics">
<div class="container">
<div class="col-lg-10 col-lg-offset-1 text-center">
<hr class="small">
<div class="row">
<div class="col-md-3">
<div class="graphics-item">
<div class="thumbnail">
<a class="fancybox-thumbs" data-fancybox-group="photo" title="Honda City 98'" href="imgs/pics/resized/car1.jpg"><img src="imgs/pics/resized/car1.jpg" alt="" /></a>
</div>
</div>
</div>
<hr class="small">
</div>
</div>
</div>
JS
$("#hideshow1").click(function(){
$("#photography").slideToggle("slow");
$("#graphics").slideUp("slow");
});
$("#hideshow2").click(function(){
$("#graphics").slideToggle("slow");
$("#photography").slideUp("slow");
});
What I'm trying to do is when I click Photography, it will change the font color and when I click Graphics, the photography color would go back to black and graphics would now be the colored font.
function chgfont(type){
// document.write("<input type=\"button\" id=\"hideshow2\" name=\"hideshow2\" value=\"red\" class=\"btn\" onclick=\"chgfont('B');\"><input type=\"button\" id=\"hideshow1\" name=\"hideshow1\" value=\"blue\" class=\"btn\" onclick=\"chgfont('A');\"> ");
if(type=="A"){
document.getElementById("colorA").style.color ="blue";
// document.write("<font color=\"blue\">Font colors is blue</font>");
}else{
document.getElementById("colorA").style.color ="red";
// document.write("<font color=\"red\">Font colors is red</font>");
}
}
<div class="bar">
<div class="container">
<div class="row">
<div class="col-lg-10 col-lg-offset-1 text-center">
<input type="button" id="hideshow1" name="hideshow1" value="blue" class="btn" onclick="chgfont('A');">
<input type="button" id="hideshow2" name="hideshow2" value="red" class="btn" onclick="chgfont('B');">
<hr class="small">
<div id="colorA">
Colored By Santa
</div>
</div>
</div>
</div>
</div>
I hope i can help you.
I would suggest a little different formation of your function. Select the .btn elements and, depending on the clicked element, get the id and perform your actions.
As for the font color, write up a css rule giving the desired color and simply add, or remove this class form the respective elements:
jQuery
$('.btn').on('click', function() {
var that = $(this);
var id = that.attr('id');
//Remove .colored class form all .btn elements
$('.btn').removeClass('colored');
//Add .colored class to the clicked element
that.addClass('colored');
var ph = $("#photography");
var gr = $("#graphics");
//Permorm the appropriate action depending on the clicked id
if (id == '#hideshow1') {
ph.slideToggle("slow");
gr.slideUp("slow");
} else if (id == '#hideshow2') {
gr.slideToggle("slow");
ph.slideUp("slow");
}
});
CSS
.colored { color:red }