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>
Related
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 have a message page which shows your current messages. But the problem is that, it shows only one message, and that's the "newest" message. And the first messagebar which I click it, it won't show the HTML Code, even if it removes the "No mail Selected"
Here's how it sees if I press at second message tab: https://i.imgur.com/hMjftkm.png
My problem is that, the first messagetab it won't show it's HTML code. And when I change the message tabs (clicking new one) it won't actualise the new code. It shows the same code layout.
I found that error is in javascript, at the MAILCONTENT (1 or 2), but i have no clue how to fix it
JavaScript
<script>
$(document).ready(function() {
$('.emailcontent input[type=checkbox]').click(function() {
if($(this).is(':checked')) {
$(this).closest('.list-group-item').addClass('selected');
} else {
$(this).closest('.list-group-item').removeClass('selected');
}
});
// Clicking a message
$('.list-group-item > .media').click(function() {
$('.list-group-item').each(function() {
$(this).removeClass('active');
});
$(this).parent().addClass('active').removeClass('unread');
$('.nomail').addClass('hide');
$('.mailcontent').removeClass('hide');
});
$('.list-group-item > .media2').click(function() {
$('.list-group-item').each(function() {
$(this).removeClass('active');
});
$(this).parent().addClass('active').removeClass('unread');
$('.nomail2').addClass('hide');
$('.mailcontent').removeClass('hide');
});
});
</script>
HTML
<div class="mainpanel">
<div class="emailcontent">
<div class="email-options">
<label class="ckbox">
</label>
</div><!-- email-options -->
<div class="list-group">
<div class="list-group-item unread">
<div class="list-left">
<label class="ckbox">
</label>
</div>
<div class="media">
<div class="media-left">
<img class="media-object img-circle" src="../images/photos/user1.png" alt="">
</div>
<div class="media-body">
<span class="pull-right">1 hour ago</span>
<h5 class="media-heading">Sendername1</h5>
<h5>Title1</h5>
</div>
<p>Hi. There's something wri..</p>
</div>
</div>
<div class="list-group-item unread">
<div class="list-left">
<label class="ckbox">
</label>
</div>
<div class="media2">
<div class="media-left">
<img class="media-object img-circle" src="../images/photos/user1.png" alt="">
</div>
<div class="media-body">
<span class="pull-right">1 hour ago</span>
<h5 class="media-heading">Sendername2</h5>
<h5>Title2</h5>
</div>
<p>That's title2 that means yo...</p>
</div>
</div>
</div><!-- emailcontent -->
<div class="contentpanel emailpanel">
<h3 class="nomail">No mail selected</h3>
<div class="mailcontent hide">
<div class="email-header">
<div class="pull-right">
2 hour ago
</div>
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object img-circle" src="../images/photos/user1.png" alt="">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Sendername1</h4>
to: me
</div>
</div><!-- media -->
</div><!-- email-header -->
<hr>
<h3 class="email-subject">MESSAGE1</h3>
<div class="email-body">
<p>Text1</p>
</div><!-- mailcontent -->
</div><!-- contentpanel --><!-- mailcontent -->
<div class="contentpanel emailpanel">
<h3 class="nomail">No mail selected</h3>
<div class="mailcontent hide">
<div class="email-header">
<div class="pull-right">
2 hour ago
</div>
<div class="media2">
<div class="media-left">
<a href="#">
<img class="media-object img-circle" src="../images/photos/user1.png" alt="">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Title2</h4>
to: me
</div>
</div><!-- media -->
</div><!-- email-header -->
<hr>
<h3 class="email-subject">MESSAGE2</h3>
<div class="email-body">
<p>That's message 2</p>
</div><!-- mailcontent -->
</div><!-- contentpanel --><!-- mailcontent -->
</div><!-- mainpanel -->
</div><!-- mainpanel -->
</div><!-- emailcontent -->
</div>
</div>
CODEPEN
https://codepen.io/anon/pen/KxGjWp
First: may be you should redesign your code little bit.
But if you just want it working as it is, here is solution:
html:
<div class="mainpanel">
<div class="emailcontent">
<div class="email-options">
<label class="ckbox">
</label>
</div><!-- email-options -->
<div class="list-group">
<div class="list-group-item unread">
<div class="list-left">
<label class="ckbox">
</label>
</div>
<div class="media">
<div class="media-left">
<img class="media-object img-circle" src="../images/photos/user1.png" alt="">
</div>
<div class="media-body">
<span class="pull-right">1 hour ago</span>
<h5 class="media-heading">Sendername</h5>
<h5>Title!</h5>
</div>
<p>This is messagebar1. Clicking it will show TITLE1.</p>
</div>
</div>
<div class="list-group-item unread">
<div class="list-left">
<label class="ckbox">
</label>
</div>
<div class="media2">
<div class="media-left">
<img class="media-object img-circle" src="../images/photos/user1.png" alt="">
</div>
<div class="media-body">
<span class="pull-right">1 hour ago</span>
<h5 class="media-heading">sendername2</h5>
<h5>Title2</h5>
</div>
<p>This is messagebar2. Clicking it will show TITLE2</p>
</div>
</div>
</div><!-- emailcontent -->
<div class="contentpanel emailpanel">
<h3 class="nomail">No mail selected</h3>
<div class="mailcontent hide">
<div class="email-header">
<div class="pull-right">
2 hour ago
</div>
<div class="media2">
<div class="media-left">
<a href="#">
<img class="media-object img-circle" src="../images/photos/user1.png" alt="">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">SENDER1</h4>
to: me
</div>
</div><!-- media -->
</div><!-- email-header -->
<hr>
<h3 class="email-subject">TITLE1</h3>
<div class="email-body">
<p>So this should be message1</p>
</div>
<br>
<hr>
</div><!-- mailcontent -->
<div class="mailcontent2 hide">
<div class="email-header">
<div class="pull-right">
2 hour ago
</div>
<div class="media2">
<div class="media-left">
<a href="#">
<img class="media-object img-circle" src="../images/photos/user1.png" alt="">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">sendername2</h4>
to: me
</div>
</div><!-- media -->
</div><!-- email-header -->
<hr>
<h3 class="email-subject">TITLE 2</h3>
<div class="email-body">
<p>So there is message2 layout. But if I click messagebar1 it won't show it's content and delete this or vice-versa</p>
</div>
</div><!-- mailcontent -->
</div><!-- mainpanel -->
</div><!-- mainpanel -->
javascript:
$(document).ready(function() {
$('.emailcontent input[type=checkbox]').click(function() {
if($(this).is(':checked')) {
$(this).closest('.list-group-item').addClass('selected');
} else {
$(this).closest('.list-group-item').removeClass('selected');
}
});
// Clicking a message
$('.list-group-item > .media').click(function() {
$('.list-group-item').each(function() {
$(this).removeClass('active');
});
$(this).parent().addClass('active').removeClass('unread');
$('.nomail').addClass('hide');
$('.mailcontent').removeClass('hide');
$('.mailcontent2').addClass('hide');
});
$('.list-group-item > .media2').click(function() {
$('.list-group-item').each(function() {
$(this).removeClass('active');
});
$(this).parent().addClass('active').removeClass('unread');
$('.nomail').addClass('hide');
$('.mailcontent2').removeClass('hide');
$('.mailcontent').addClass('hide');
});
});
So problem was that even when you hiding mailcontent2, its wrapper div is still visible and mailcontent is visible but under that empty div. I moved both mailcontent under same container div. I would suggest to you on load create an array of object that contains messages and assign to each left panel menu item id that is same as array index of that message, then you can have only one mailcontent and just assign different text to it from array.
Also use dev console in browser (usually F12) there you can hover over element and see its dimensions and location, so it was visible that second mail container is over the first one. Also there you can disable, enable and edit css fast and run javascript commands, so you can compose suitable style and see right away how it will look.
i have a page in web 'about TOEFL'. if i click about TOEFL, then the content/form was changing to content/form about TOEFL. when i click 'about TOEFL' the content was changing but when i click 'close', the form/content not changing. please help
this is my page code
<!-- Start Page 2 About -->
<div id="page2" class="content">
<div class="container_12">
<div class="grid_12">
<div class="slogan">
<h3>Help your <span>TOEFL</span> Score<em> High</em></h3>
</div>
</div>
<!-- Start menu-form -->
<form id="menu-form">
<div class="grid_2">
<div class="box 60px"> <img src="images/img1.png" alt="">
<div class="text1">About TOEFL</div>
</div>
</div>
<div class="grid_2">
<div class="box 60px"> <img src="images/img2.png" alt="">
<div class="text1">Tips and Trick</div>
</div>
</div>
<div class="grid_2">
<div class="box 60px"> <img src="images/img8.png" alt="">
<div class="text1">Cambridge</div>
</div><br><br><br><br><br><br><br><br>
</div>
</form>
<!-- End menu-form -->
<!-- Start AboutTOEFL-form -->
<form id="AboutTOEFL-form" style="display:none" class="grid_14">
<div id="filters" class="sixteen columns">
<ul class="clearfix">
<li><a href="#page2" onclick="showAboutTOEFL()">
<h5>About TOEFL</h5>
</a></li>
<li><a href="#" >
<h5>Tips And Trick</h5>
</a></li>
<li><a href="#page2" onclick="showMenuForm()">
<h5>Close</h5>
</a></li>
</ul>
</div>
<div class="box 1000px">
<img src="images/toefl-1.jpg" alt=""><br><br>
--my text--
</div>
</form>
<!-- End AboutTOEFL-form -->
</div>
</div>
<!-- End Page 2 -->
this is my java script
<script type="text/javascript">
var showAboutTOEFL = function() {
document.getElementById("menu-form").setAttribute("style", "display:none");
document.getElementById("AboutTOEFL-form").setAttribute("style", "display:block");
}
</script>
<script type="text/javascript">
var showMenuform = function() {
document.getElementById("menu-form").setAttribute("style", "display:block");
document.getElementById("AboutTOEFL-form").setAttribute("style", "display:none");
}
</script>
The casing on your onclick event is wrong. You have onclick="showMenuForm()", but your function name is showMenuform (lowercase "f").
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";
}
This question already has answers here:
Callback of .animate() gets called twice jquery
(2 answers)
Closed 8 years ago.
I'm creating a multi-tabbed accordion using jQuery. The "Headline 1" panel works fine but on "Headline 2" the panel runs the SlideDown() method twice. Another small problem I noticed is there being some delay in between when I click on a button/link and when the panel slides down.
You can take a look at the jsfiddle here to test and see the problem:
http://jsfiddle.net/3VzTj/1/
jQuery:
$(document).ready(function() {
var class_link, class_div, content_div;
var all_panels = $('article > div.row').not(':first-child');
$(all_panels).hide();
$('div.buttons a').click(function() {
class_link = $(this).attr('class');
class_div = class_link.match(/[^-]+$/);
content_div = $(this).closest('article').find('div.' + class_div).parent();
if ($(content_div).is(':visible')) {
$(all_panels).slideUp();
} else {
$(all_panels).slideUp(function() {
$(content_div).hide().slideDown();
});
}
return false;
});
});
HTML:
<section class="grid-container">
<article>
<div class="row clearfix">
<div class="column half">
<h2>Headline 1</h2>
</div>
<div class="column opposite half buttons">
<a class="button-content1" href="#">Content 1</a>
<a class="button-content2" href="#">Content 2</a>
</div>
</div>
<div class="row clearfix">
<div class="column full content1">
<h1>Content 1</h1>
</div>
</div>
<div class="row clearfix">
<div class="column full content2">
<h1>Content 2</h1>
</div>
</div>
</article>
<article>
<div class="row clearfix">
<div class="column half">
<h2>Headline 2</h2>
</div>
<div class="column opposite half buttons">
<a class="button-content1" href="#">Content 1</a>
<a class="button-content2" href="#">Content 2</a>
</div>
</div>
<div class="row clearfix">
<div class="column full content1">
<h1>Content 1</h1>
</div>
</div>
<div class="row clearfix">
<div class="column full content2">
<h1>Content 2</h1>
</div>
</div>
</article>
</section>
// replace
$(all_panels).slideUp(function() {
$(content_div).hide().slideDown();
});
//with
$(all_panels).slideUp().promise().done(function() {
$(content_div).hide().slideDown();
});