Please help me, i'm having a hard time with this one. I already search for this one on google and here in stackoverflow but I wasn't able to find the specific answer to this one. I hope you can help me. Thanks!
Here's my code:
$(document).ready(function() {
$(".link").click(function() {
$(".hide").hide();
var dataType = $(this).attr('data-type');
$("#" + dataType).show();
});
});
The previous div is still showing. :( I want to hide it once clicked the link and scroll down to the specific div within the page. :(
Since you didn't specify what your exact expectation, this one would help i guess
$("div").hide();
// Show chosen div, and hide all others
$("a").click(function (e)
{
//e.preventDefault();
$("#" + $(this).attr("class")).show().siblings('div').hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
Click to make it visible:<br /><br />
One
Two
Three
Four<br /><br />
<div id="one">One</div>
<div id="two">Two</div>
<div id="three">Three</div>
<div id="four">Four</div><br/><br/>
</body>
Related
im trying to keep div 1 hidden if div 2 is on display, but when div 2 is hidden i want div 1 to show. im trying to do this in javascript but its not working for me :(
can someone please show me where im going wrong thanks.
<script>
$(".profile-banner2").hide();
$(document).ready(function(){
if ($('.infobox-profile').is(":visible")) {
$(".profile-banner2").hide();
} else if ($('.infobox-profile').is(":hidden")) {
$('.profile-banner2').show();
}
});
</script>
Try like this:
<div id="div1"> this is first div </div>
<div style="display:none"> this is second div</div>
<input type="submit" value="toggle" id="toggle"/>
and the script:
$(function(){
$("#toggle").click(function(){
$("div").toggle();
});
});
Here is the fiddle
EDIT
check the updated fiddle,which works if the anywhere in the html is clicked
I have the following JavaScript at the end of the body of my HTML:
<script>
$(document).ready(function() {
$("a").click(function(event) {
var div_to_show=event.target.id;
var real_div=div_to_show.split('-');
var display_div=real_div[0];
var elementPos=$("#"+div_to_show).offset();
var top_pos=elementPos.top-118.5;
$('#board-right div').hide();
$("#" + display_div).css('margin-top',top_pos);
$("#" + display_div).show();
});
});
</script>
And here is the HTML that it is supposed to manipulate:
<div id="board-left">
<div id="board-names">
<a id="marci-link">Marci Weisler</a><br />
<a id="nicholas-link">Nicholas Rey</a><br />
</div>
</div><!-- #board-left -->
<div id="board-right">
<div id="marci" style="display:none;">
<p>
Marci Weisler is an accomplished...
</p>
</div>
<div id="nicholas" style="display:none;">
<p>
Nicholas Rey is a French-born...
</p>
</div>
</div><!-- board-right -->
So, the code should get the div name from the clicked link, remove the "-link" portion, and then show the appropriate div. Currently nothing is happening when I click the link. As I'm writing this, I am wondering if it is a CSS issue? Any ideas?
By the way, there is a link in the document to jQuery 1.3.
if you check http://jsfiddle.net/pramodpv/YvYBD/,
you will find that the top pos is negative.. if u correct that as u require it will work
PS: try using jsfiddle while posting your questions so that people can work on your code and give faster answers... Most prb, you will find the answer yourself :D
Trying your example, I found that I had to add an href='#' attribute to the hyperlinks and then added an event.preventDefault() as the first line in your click handler.
And same as Pramod SyneITY, the top position needs to evaluate as a positive value for the text to be visible.
I am trying to make sections of page collapsible. No plan to use accordion, but simple hide/show to save screen space. See the sample code below. The first link has to click twice to make the section hide, and the second one works fine. Neglect this issue, if you can suggest a better way to do it.. In this example, div1 is in open position and div2 hidden initially.
thanks,
bsr.
<!doctype html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
</head>
<body>
<a class="toggle" href="#">Hide</a>
<div class="toggle">
<p>First div</p>
</div>
<a class="toggle" href="#">Show</a>
<div class="toggle" style="display: none">
<p>Second div</p>
</div>
<script type="text/javascript">
jQuery().ready(function() {
$("a.toggle").toggle(
function() {
$(this).text("Hide");
$(this).next("div.toggle").show();
},
function() {
$(this).text("Show");
$(this).next("div.toggle").hide();
}
);
});
</script>
</body>
</html>
I would use the toggle() function, as it's not only used to bind toggling events, it also toggles visibility is called without any parameters:
jQuery().ready(function() {
$("a.toggle").click(function(){
var $div = $(this).next("div.toggle");
$div.toggle();
if($div.is(':visible'))
$(this).text('Hide');
else
$(this).text('Show');
});
});
The problem with your code is that you're showing/hiding the elements regardless of their initial state. No matter what you do, if you bind events using toggle(func, func), the first function will always be called first.
The reason the first one needs to be clicked twice is because it starts with the div showing. When you click on it the first time, because of the nature of the toggle event, jQuery thinks that you're trying to show it. But it's already showing. So none of the changes take effect.
You can solve this by having everything start out hidden. But if that's not an option, then you'll have to do away with the toggle event listeners and just listen for clicks:
$('a.toggle').click(function () {
var $this = $(this);
if ($this.text() === 'Show') {
$this.text('Hide').next('div.toggle').show();
} else {
$this.text('Show').next('div.toggle').hide();
}
});
I am looking to implement a mouseover event on my page for a menu -
I have 3 titles to the left with a respective content div on the right where the related text appears.
Having trauled all the forums for a working js solution, I have settled with:
http://flowplayer.org/tools/demos/tabs/mouseover.html
which uses a very simple js function:
$("#products").tabs("div.description", {event:'mouseover'});
What I am hoping to do however, is to incorporate a fadeIn(), fadeOut effect so that when the user hovers over a title on the left of the page, the existing content showing fades away and the repective content will fade in to view......
The html coding is:
<div id="products" >
<img src="home.png" alt="home" />
<img src="services.png" alt="services" />
<img src="contact.png" alt="contact" />
</div>
<div class="description" id="home" >
.. content ..
</div>
<div class="description" id="services" >
.. content ..
</div>
<div class="description" id="contact" >
.. content ..
</div>
I have tried to incorporate thread 5404775 on this site but simply cannot get it working!
Any help much appreciated
The below can be seen on jsfiddle.
You can fade them in and out on mouseover like this
var _current = "home"; // default state
$('#products img').mouseover(function (){
// The one we want to show now
var id= $(this).attr('alt');
// We don't need to do anything if it's the same one that's already
// there
if (_current !== id){
$('#' + _current).fadeOut(function(){
// Fade in the new one after the old fades out
$('#' + id).fadeIn();
// Update state
_current = id;
});
}
});
I also added some thing to make sure that only the one you want displayed first is displayed when the page loads. I'm assuming it would be the home div.
Add this to the CSS
.hidden{
display:none;
}
and put that class on the other divs.
<div class="description hidden" id="services" >
.. services..
</div>
<div class="description hidden" id="contact" >
.. contact ..
</div>
I'm working off the assumption that you want people hovering over the image buttons here to make the corresponding divs fade in and out. What they are doing on that site will not work because Javascript is needed for the fading effect. JQuery makes this easy.
I recommend trying something like
<script type="text/javascript">
oldSelected = "home"
$(document).ready(function(){
$("#products img").mouseover(function(){
$(".description").stop(true, true);
var newSelected = $(this).attr("alt");
$("#" + oldSelected).fadeOut('normal',function(){
$("#" + newSelected).fadeIn();
});
oldSelected = newSelected
});
});
</script>
I have tested this and it works. One thing you will want to make sure of is that the css for the divs has them set to not be visible at the start, unless you want one of them visible in which case the id for that div should be what you set the oldSelected to at the start of the function.
Enjoy!
This might work:
$("img", "#products").hover(function() {
var id = $(this).attr("alt");
$("#" + id).fadeIn("slow");
}, function() {
var id = $(this).attr("alt");
$("#" + id).fadeOut("slow");
});
Another idea (without Jquery): you could use CSS opacity:x property (for firefox) or filter:alpha(opacity=x) (for IE) to change the opacity of an element. Fade in/out can be obtained with a small slowed-down cycle.
See also:
http://www.w3schools.com/css/css_image_transparency.asp
After cobbling together a few questions I've managed to get this far to showing / hiding divs:
$(document).ready(function(){
$('.box').hide();
$('#categories').onMouseOver(function() {
$('.box').hide();
$('#div' + $(this).val()).show();
});
});
HTML:
<div id="categories">
<div id="btn-top20">Top 20 Villas</div>
<div id="btn-villaspec">Villa Specials</div>
<div id="btn-staffpicks">Our Staff Picks</div>
</div>
<div id="category-content">
<div id="divarea1" class="box">
Content 1
</div>
<div id="divarea2" class="box">
Content 2
</div>
<div id="divarea3" class="box">
Content 3
</div>
</div>
What am I missing?
This will work:
<div id="btn-top20" rel="area1">Top 20 Villas</div>
<div id="btn-villaspec" rel="area2">Villa Specials</div>
<div id="btn-staffpicks" rel="area3">Our Staff Picks</div>
with this code:
$(document).ready(function(){
$('.box').hide();
$('#categories div').mouseenter(function() {
$('.box').hide();
$('#div' + $(this).attr('rel')).show();
});
});
Corrections:
No such function onMouseHover.
Attached the event to every div, not the #categories parent, so this has the right context.
added rel for every div, because val is meaningless.
Working example: http://jsbin.com/ivuxo
You may also want to hide the div on mouse out, in wich case you can use hover:
$('#categories div').hover(
function() { //hover in
$('.box').hide();
$('#div' + $(this).attr('rel')).show();
}, function(){ //out
$('.box').hide();
});
Flexible, generic (and untested!) solution which works with any number of "tabbed" element groups. You just need to specify ".tab-handles a[href=#id_of_target_tab]" hierarchy. As a bonus, the selected tab is remembered between page loads.
$(function() { // Shortcut for $(document).ready()
$('.tab-handles a').mouseenter(function() {
// Trigger custom event 'hide' for sibling handles.
$(this).siblings().trigger('hide');
// Show current tab.
$($(this).attr('href')).show();
}).bind('hide', function() {
// Hide the corresponding tab on custom event 'hide'.
$($(this).attr('href')).hide();
}).each(function() {
// Show tab if its id is found in url as an anchor (or hash).
if (new RegExp($(this).attr('href') + '$')).test(window.location.href))
$(this).trigger('mouseenter');
});
})
Your page can contain any number of the following structure:
<ul class="tab-handles">
<li></li>
<li></li>
</ul>
<div>
<div id="top-villas"> Your tab content goes here. </div>
<div id="villa-specials"> ... </div>
</div>
onMouseOver isn't a valid jquery method, among other things.
I really recommend browsing with google chrome when you're looking to debug javascript, it's error console is very useful for not just determining errors like this, but also for pinpointing the location in the script that is throwing the error, which might be an advantage beyond Firebug in firefox.
(And you can always run firebug lite as well via the bookmarklet even while using chrome, as the firebug lite website will show: http://getfirebug.com/firebuglite)
I used this to toggle my divs:
html
<div class="content-item-news">..</div>
<div class="content-news-extra">...</div>
jquery
$(".content-item-news").click(function() {
$(this).next(".content-news-extra").slideToggle(100);
});
I know this has already had a decent answer and although this isn't jQuery/mooTools - I figured it was worth a mention:
Seven Ways To Hide An Element With Javascript:
http://www.dustindiaz.com/seven-togglers/
:)