I am trying to make a section appear when my button is clicked and instead I am getting a blank screen. I am not sure why this is. Any suggestions would be helpful. I am trying to display the arnold-page div.
<section class="middlePage"><!-- START MIDDLE SECTION -->
<div class="album-nav">
<button class="arnold">Arnold</button>
<button class="cats">Cats</button>
<button class="dogs">Dogs</button>
<button class="batman">Batman</button>
<button class="lions">Lions</button>
<button class="tigers">Tigers</button>
</div>
<div class="arnold-page"> <!-- START DIV display-on --><h1>Arnold</h1>
<div id="arnold1">
<img src=" ">
<p>Photo 1</p>
</div>
<div id="arnold2">
<img src="images/arnold.jpg">
<p>Photo 2</p>
</div>
<div id="arnold3">
<img src=" ">
<p>Photo 3</p>
</div>
<div id="arnold4">
<img src=" ">
<p>Photo 4</p>
</div>
<div id="arnold5">
<img src=" ">
<p>Photo 5</p>
</div>
<div id="arnold6">
<img src=" ">
<p>Photo 6</p>
</div>
</div> <!-- END DIV display-on -->
</section><!-- END MIDDLE SECTION -->
backButton1.on('click', function() {
bottomPage1.hide();
middlePage.hide();
arnoldPage.show();
});
Try This Script
$(function(){
//Default hide section
$(".arnold-page").hide();
$(".arnold").on("click",function()
{
$(".arnold-page").show()
});
})
You can achieve the result by setting the display property to none, and on clicking the button, change the display property to block or inline.
<!--Jquery -->
$(document).ready(function(){
$(".arnold-page").css("display","none");
$(".arnold").click(function(){
$(".arnold-page").css("display","block");
});
});
Related
I want to make something like the amazon help page :
https://www.amazon.fr/gp/help/customer/display.html/ref=nav_cs_help?ie=UTF8&nodeId=508510#nav-top
When the mouse is in one category we can see the concern content on the right
My code works almost, however, when my mouse comes out of the link the right div is no longer active
There is my code :
Html :
<div class="activity--js margin-card activity-card card card-body">
<div class="row">
<div class="col-3 help__titles-part">
<% #helps.each do |help|%>
<p class="help__title" data-id='<%=help.id %>'><%=help.title%></p>
<%end%>
</div>
<div class="col-9 help__contents-part" >
<div class="row">
<% #helps.each do |help|%>
<div class="col-12 help__content-<%=help.id %>" style="display:none">
<p><%=help.content%></p>
</div>
<%end%>
</div>
</div>
</div>
</div>
JS:
$('.help__title').hover(
function () {
$(this).toggleClass('help__title-active');
Id = $(this).data("id");
console.log(Id);
$('.help__content-' + Id).toggleClass('help__content-active');
});
You asked it to be like the amazon example, which uses a mouseenter event, not click and definitely not hover.
jQuery(document).ready(function($){
$('.help__title').mouseenter(function(){
$('.help__title-active').removeClass('help__title-active');
$('.help__content-active').removeClass('help__content-active');
$(this).addClass('help__title-active');
Id = $(this).attr("data-id");
$('.help__content-' + Id).addClass('help__content-active');
});
});
.help__title-active{font-weight:bold; color:red}
.help__content-active{display:block !important;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="activity--js margin-card activity-card card card-body">
<div class="row">
<div class="col-3 help__titles-part">
<p class="help__title" data-id='1'>Title 1</p>
<p class="help__title" data-id='2'>Title 2</p>
<p class="help__title" data-id='3'>Title 3</p>
<p class="help__title" data-id='4'>Title 4</p>
</div>
======================================================================
<div class="col-9 help__contents-part" >
<div class="row">
<div class="col-12 help__content-1" style="display:none">
<p>Help 1</p>
</div>
<div class="col-12 help__content-2" style="display:none">
<p>Help 2</p>
</div>
<div class="col-12 help__content-3" style="display:none">
<p>Help 3</p>
</div>
<div class="col-12 help__content-4" style="display:none">
<p>Help 4</p>
</div>
</div>
</div>
</div>
You can use the following jQuery to achieve the above mentioned result:
var list = $("ul");
list.find("li").mouseenter(function(){
if($(this).hasClass("active")){
list.removeClass("active");
}else{
$(this).addClass("active");
$(this).siblings().removeClass("active");
}
});
I have used this dummy HTML:
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
I have used this as the CSS to make the code more understandable:
.active{
background-color:orange!important;
}
li{
background-color:blue;
color:white;
width:20%;
cursor:pointer;
}
li:not(:last-child){
margin-bottom:5px;
}
Here is a jsfiddle supporting this.
But this will easily be reset once the page is refreshed as this changes the layout dynamically, its not fixed.
I hope this was helpful.
How to get slick slider every image offset. As my requirement, I have using fig caption in every image right bottom. So I need image offset. Anyone help me is this possible for the slick slider.
<div class="your-class">
<div>
<img src="images/img1.jpg" />
<div class=" img-cnt ">
<p>Image 1</p>
</div>
</div>
<div><img src="images/img2.jpg" />
<div class="img-cnt">
<p>Image 2</p>
</div>
</div>
<div>
<img src="images/img3.jpg" />
<div class=" img-cnt ">
<p>Image 1</p>
</div>
</div>
</div>
<script type="text/javascript ">
$(document).ready(function() {
$('.your-class').slick({});
});
</script>
I have a horizontal grid consisting of 3 image squares - The action that I am trying to produce is when any grid section is clicked, the user will be anchored down to a slideshow box that is being displayed below the grid. the first bit of HTML that I have pasted below is one grid (there will be 3) - and the section section of HTML is the slideshow section. Since I cant use the same ID tag multiple times in HTML, I believe I will need to use some for of Javascript or jQuery to take the user from the grid on click to the . Could anyone help me figure out how to do that?
<div id="grid-item" class="grid-item grid-item-1">
<div class="grid-project">
<img class="profile-image" src="img/image1.png">
</div>
<div class="grid-overlay">
<div class="project-info">
<a href="#project-link" id="toggle">
<h4 class="project-name">Headline 1</h4>
<p class="project-categories">description 1</p>
</a>
</div>
</div>
</div>
<div id="grid-item" class="grid-item grid-item-2">
<div class="grid-project">
<img class="profile-image" src="img/image.png">
</div>
<div class="grid-overlay">
<div class="project-info">
<a href="#project-link" id="toggle">
<h4 class="project-name">Headline 2</h4>
<p class="project-categories">description 2</p>
</a>
</div>
</div>
</div>
<div id="slideshow" class="slideshow">
<div class="slideshow_inner">
<a name="project-link" class="anchor">
<img src="img/slide_img_1.png">
</div>
</div>
If you're using id="" you can't use same id twice... Each element should have different id name. Change this in the second grid:
<a href="#project-link" id="toggle">
to this:
<a href="#project-link" id="toggle2">
and don't use same id twice...
Also, you have used name="" in the second section of your html, instead of id:
<a name="project-link" class="anchor">
Thanks for trying to help! I'm having an issue with the following code when the page initially loads. The div class 'highlights', which contains the divs 'box' and 'box-2', jumps around the page when loading. I suspect is has something to do with the social media buttons running javascript above the divs but cannot figure out how to get everything to stay still. Here is a link to the site. Thank you all for helping!!
<div class="buttons">
<div class="fb-share-button" data-href="http://www.powerrankingsguru.com/MLB/2015-MLB- power-rankings/week-18.html" data-layout="button_count">
</div>
<div class="twitter-button">Tweet
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s) [0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)) {js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</div>
<div class="g-plus" data-action="share" data-annotation="bubble" data- href="http://www.powerrankingsguru.com/MLB/2015-MLB-power-rankings/week-18.html"> </div>
</div>
<div class="highlights">
<div class="box">
<div class="box-header"><p>What to Watch</p></div>
<div class="box-content">
<div class="game-details">
</div>
<div class="game-overview">
<div class="away-team">
<div class="away-team-logo">
<img src="../../Images/MLB/Los_Angeles_Dodgers_75px.gif">
</div>
<div class="record">
<h6>Dodgers</h6>
<h6 class="lighter">(60-45)</h6>
</div>
</div>
<div class="home-team">
<div class="home-team-logo">
<img src="../../Images/MLB/Pittsburgh_Pirates_75px.gif">
</div>
<div class="record">
<h6>Pirates</h6>
<h6 class="lighter">(61-43)</h6>
</div>
</div>
<div class="symbol">#</div>
</div>
</div>
<div class="date">
<h4><span class="left">Fri Aug 7th - Sun Aug 9th</span></h4>
</div>
</div>
<div class="box2">
<div class="box2-header"><p>Biggest Movers</p></div>
<div class="rise">
<div class="rise-up"><img src=../../Images/arrowGW.gif></div>
<div class="rise-number"><p>5</p></div>
<div class="rise-team"><img src="../../Images/MLB/Toronto_Blue_Jays_75px.gif"></div>
</div>
<div class="fall">
<div class="fall-down"><img src=../../Images/arrowRW.gif></div>
<div class="fall-number"><p>5</p></div>
<div class="fall-team"><img src="../../Images/MLB/Atlanta_Braves_75px.gif"></div>
</div>
</div>
</div>
If you're okay with using javascript you could hide your container box with display: hidden and then in a javascript onload function you would set the display back to block.
Div:
<div id="highlightDiv" class="highlights" style="display: hidden">
...
</div>
onload:
window.onload = function() {
document.getElementById("highlightDiv").style.display = "block";
}
VERY new to js but here it goes.
I want to be able to click on one of the images in the Portfolio section and have it change the text of the h3 in the Text section with a fade transition as well as select the corresponding slide in the slider.
Code:
<!-- 960 Container -->
<div class="container">
<!-- Description -->
<div class="sixteen columns">
<!-- Text -->
<h3 class="page_headline">Why Do You Need Manage+ For Your Business?</h3>
<div class="flexslider">
<ul class="slides">
<li>
<div id="details">Tier-1 Tech Support</div>
</li>
<li>
<div id="details">Off-site Backups</div>
</li>
<li>
<div id="details">Loaner Computer</div>
</li>
</ul>
</div>
</div><!-- End Description-->
<!-- Portfolio Content -->
<div id="portfolio-wrapper">
<!-- 1/4 Column -->
<div class="four columns portfolio-item">
<div class="item-img"><a href="support.html"><img src="img/support.jpg" alt=""/>
<div class="overlay link"></div></a></div>
<div class="portfolio-item-meta">
<h4>Tier-1 Tech Support</h4>
</div>
</div>
<!-- 1/4 Column -->
<div class="four columns portfolio-item">
<div class="item-img"><a href="backup.html"><img src="img/backup.jpg" alt=""/>
<div class="overlay link"></div></a></div>
<div class="portfolio-item-meta">
<h4>Off-site Backups</h4>
</div>
</div>
<!-- 1/4 Column -->
<div class="four columns portfolio-item">
<div class="item-img"><a href="loaner.html"><img src="img/loaner.jpg" alt=""/>
<div class="overlay link"></div></a></div>
<div class="portfolio-item-meta">
<h4>Loaner Computer</h4>
</div>
</div>
</div><!-- End Portfolio Content -->
</div><!-- End 960 Container -->
all you need is plane javascript or for lesser code, jquery.
just place your img and your div in the markup and bind the click event of the img to function in which you toggle your division display
you can have multiple images, referring to multiple containers(or same containers), which are hidden by default, but as you click on the relative image, it would appear.
see the code below
create your markup like:
<div class="wrapper">
<div class="image">
<img src='../images/actions_button_ok.png' data-target="one" />
<img src='../images/actions_button_ok.png' data-target="two" />
<img src='../images/actions_button_ok.png' data-target="three" />
</div>
<div class="target" id="one" >
this is text A
</div>
<div class="target" id="two" >
this is text B
</div>
<div class="target" id="three" >
this is text C
</div>
</div>
and your jquery code as:
$(document).ready(function(){
$('img').on("click",function(){
$('.target').hide();
$('#'+$(this).data('target')).toggle(1000);
});
});
basically, your html structure can be of your choice, but that's how you should go about it.
explore more about jquery.
see this fiddle.
instead of binding click to img, you can bind it to your li aswell.