The goal is to show one div when I click on another one. The problem with my code below is that it shows content when the page loads(you can click on a div to hide/show another one), but I want it to be hidden when the page loads(hidden by default). This is what I have now:
<div class="r-clickfeature">...click here to show another div</div>
<div class="r-productfeature">something...</div>
<script type="text/javascript">
$('.r-clickfeature').on('click', function(e) {
return $(".r-productfeature").slideToggle();
});
</script>
Adding some css to hide the second div by default is the way to go.
.r-productfeature {
display:none;
}
JSFIDDLE here.
Your code is faulty. Change it to this one
<script type="text/javascript">
$(document).ready(function () { // required for jQuery...
$('.r-clickfeature').click(function(e) { // on click
$('r-productfeature').slideToggle(); // slide the other div
});
});
</script>
Related
I have a page which users get to by clicking through an ebook. When they click a link it takes them to a product on the page depending on the link so it looks like
example.com/#product1
example.com/#product6
example.com/#product15,
etc...
The page already scrolls to that part of the page using this code:
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('html,body').animate({
scrollTop: jQuery(window.location.hash).offset().top-150
}, 900, 'swing');
});
I have another div within the #product1 div called #amazonbutton with a style of display:none.
<div id="product1" class="product">
<a href="link">
<div id="amazonbutton"><img src="amazonbuttonz" />
</div>
</a>
</div>
This is because it's a "go to amazon" button hidden for all items except the currently selected div. So basically, the button should display for the :active div while staying in its original state (hidden) for all inactive divs.
How can I change this with jquery?
I have this bit of code which is incomplete and I'm stuck:
jQuery(function() {
jQuery('amazonbutton').each(function() {
if (jQuery(this).attr('href') === window.location.href) {
jQuery(this).addClass('active');
}
});
});
Thank you in advance!
There is a cool thing called document.activeElement . It is a read only property that tracks the current active element.
$('.yourdivclass').hide();
$(document.activeElement).show();
You can activate a element by .focus() .activate()
Firstly, you looped the amazonbutton, in your code i saw that it wasn't a link. So you can't check the attr href. I guess that you want to check the href of amazonbutton's parent. Secondly, amazonbutton in your loop is a class or id? You must add . or # to it. The code could be:
jQuery(function() {
jQuery('#amazonbutton').each(function() {
if (jQuery(this).parent().attr('href') === window.location.href) {
jQuery(this).addClass('active');
}
});
});
I'm hiding a div until a button is clicked thru this script:
$(document).ready(
function() {
$(".openthis").click(function() {
$("#yalecontent").show("slow");
});
});
but I'm also using TwentyTwenty inside that div and after I clicked the link to show the div, the TwentyTwenty content doesn't have any height so it's not showing up. How can I make it show up? This is my script for twenty twenty:
$(window).load(function() {
$("#container1").twentytwenty();
});
Here's a jsfiddle. Note that I can't make twentytwenty to work in here and I'm not sure why. It's working in my localhost but I just want to show how I made the structure.
First of all don't hide '#yalecontent' div by css.
$(document).ready(function() {
$("#container1").twentytwenty();
// hide here after twentytwenty load in this div.
$("#yalecontent").hide("fast");
$(".openthis").click(function() {
$("#yalecontent").show("slow");
});
});
Try this one it may be solve your problem.
I have a span that I want to create a jquery dialog on when it is clicked.
I have included this in the header:
<script type="text/javascript">
$(document).ready(function () {
$('#quote_dialog').click(function () {
$('#quote_dialog_open').dialog('open');
return false;
});
});
</script>
The following is the span (havent included content):
<span id="quote_dialog">
content
</span>
And the div is just a box on the screen:
<div id="quote_dialog_open">
content
</div>
I assume I need to hide the div using CSS? Will jQuery make it popup as opposed to just appearing?
Nothing is happening at present when the span is clicked.
Firstly, Make sure you are also including the relevant jquery UI...
Secondly, look at this fiddle, it shows you the solution.
$(document).ready(function () {
// next add the onclick handler
$("#quote_dialog").click(function() {
$("#dialog").dialog();
return false;
});
});
http://jsfiddle.net/k0nzhtLw/
Hope it helps :)
wild guess, your problem is the typo, change
$('#quote_dialog_oepn').dialog('open');
to
$('#quote_dialog_open').dialog('open');
Here is my script :
<body>
<div id ="mainCategory" class='fade'>
Category</div>
<div id="divSubCategory">
Category1
<br />
Category2
</div>
<script type="text/javascript">
$("div").hover(
function () {
$(this).append($("#divSubCategory").html());
},
function () {
$("#divSubCategory").remove();
}
);
$("#divSubCategory.fade").hover(function () { $(this).fadeOut(100); $(this).fadeIn(500); });
</script>
</body>
I want to show and hide divSubCategory on mainCategory hover. But it doesn't work. What should I add?
$(document).ready(function(){
$('#mainCategory').bind('mouseenter', function() {
$('#divSubCategory').fadeIn();
});
$('#mainCategory').bind('mouseleave', function() {
$('#divSubCategory').fadeOut();
});
});
Ok dude the problem is that you're using .html(). This copies the inner html (not the outer <div id="divSubCategory"></div> bit too... just the bit in the middle.
Because of this, when you do $('#divSubCategory').remove() its removing the actual div in the HTML, not the HTML you've moved into the div above.
Assuming you have display: none on #divSubCategory you will see the text from that div get appended to the first div, then when you mouse-out it will not go away (although the second (hidden) div will get deleted).
Anyway the way around this is to use clone(). I'll do a fiddle for you:
http://jsfiddle.net/fZZu5/1/
I also fixed your fades for you.
EDIT: This moves the div#divSubCategory into the div#mainCategory before showing it and then removes it completely from there when you mouse-out - this is what I assumed you wanted to do from your code. Nicks just shows and hides it where it is. Depending on what you want, both these answers are correct. :)
This is the 100% working with your requirement:
Check this: http://jsfiddle.net/ZWqnk/8/
Wrap your code inside the document.ready() function
$(document).ready(function(){
// Your code here
});
Ok this is my problem that no one can seem to answer. I have two javascripts in use. Once is for the popup I have and tells it to stay closed for 24hrs when closed. The other is to put a link some where on the page to display this popup until refreshed and kept hidden till the cookie expires. Now the div popup is set to display:none. The cookie tells it to be shown until the close button is pressed. No matter what I seem to rework in my javascript to tempoarly show the popup from a link, it will not show. Some how the cookie javascript is going to have to be modified and thus having to remove css:display:none on the popup div. I have no idea what to do.
This is the current code:
http://jsfiddle.net/Dv7DR/-
http://pastebin.com/fHvv5spn
<script type="text/javascript">
$("#linkshow").click(function {
$("#window").show()
});
</script>
Submit a comment
<div id="window">
...
<div>
<script type="text/javascript">
...cookie popup hide for 24hr on close
</script>
Note: I have already tried:
$(document).ready(function() {
$("#linkshow").click(function(e) {
e.preventDefault();
$("#window").show();
});
});
and...
$(document).ready(function() {
$("#window").hide();
$("#linkshow").live('click', function(e) {
e.preventDefault();
$("#window").show();
});
});
and...
$(function() {
$("#linkshow").click(function() {
$("#window").show()
});
});
and...
<div id="window" style="display:none;">
to
<div id="window">
Then the other 24hr cookie javascript doesn't keep the popup hidden. I am assuming I need to take out the id="window" style="display:none; and some how advanced the javascript cookie at the bottom the code so it will hide when asked to be hidden for 24hr and show when needed to be shown on the current page until refresh but I am at blank on what to do.
Your syntax is wrong, Try
$(document).ready(function() {
$("#linkshow").click(function(e) {
e.preventDefault();
$("#window").show();
});
});
Works for me: See jsFiddle
You need to wrap your code in a DOM ready handler, and you also missed the brackets following the function declaration. Try this:
<script type="text/javascript">
$(function() {
$("#linkshow").click(function() {
$("#window").show()
});
});
</script>