At the moment, I've got the code:
$(document).ready(function(){
$("#sign-up").click(function(){
$(".collapse").slideToggle();
});
});
That, when the anchor is clicked, the form will either expand or collapse. The problem I've got at the moment is that the page will load with the form expanded - I want it to be collapsed.
Many Thanks.
You need to add style="display:none" to the form tag assuming it is the form that is to be expanded and collapsed?
Related
I am working on an ecommerce site, I have a page that shows the products grid. There are two button side by side. One contains link to the post and other opens a dialogue box with textarea inside. (see picture)
Image 1
Image 2
Now, what I want is when I click the GETLINK BUTTON button it must take the href attribute of the VIEW BUTTON and populate in the textarea. But what I get in the link of 1st product only even if I click the other Get Link Buttons.
Here's the JS code:
function opengetlink(){
var sacprodlink = document.getElementById("sac_prod_link").href;
jQuery("#sac_link_text").html(sacprodlink);
}
Help would be appreciated, thanks in advance.
EDIT: Solved
$(".open").click(function() {
var link = $(this).closest('div.viewbutton').find('a.btn-link').attr('href');
$("#link_text").html(link);
});
Ids are given to HTML elements to make them unique. Since you have many elements of the same kind and want to perform the same operation on each of them, you should use classes. Give your View and Get Link buttons a class.
$(".sac_open_link").click(function() {
var link = $(this).siblings(".sac_prod_link").href;
$(this).html(link);
});
I have 4 links, and 4 content boxes which the first content box is visible and the other 3 are hidden. I believe I need to use javascript to toggle these content boxes. When I click the second link it should show the second content box and hide the first one. if it was possible to fade in and out that would be awesome. Please help I have been searching for a tutorial doing exactly this and I just cant put it together
According to your current structure, I changed the HTML code and come up with this jQuery:
$("a").click(function(){
$("div").fadeOut("slow")
$("#"+$(this).text()).fadeIn("slow");
});
Check out this Fiddle..
I have this simple demo to test bootstrap modal and JSON.
Code
When I click button "show", it loads the JSON and parses it.
And button "Launch demo modal" shows the parsed JSON.
But when I click the button "show" again,
the previous list in the modal is not removed and it appends with the current list
increasing the size of the modal.
I want to refresh the cache everytime I click the "show" button.
Please help.
You have to use .html() instead of .append() . .append() adds other list to your modal body, .html(list) instead, changes all the content of the modal body you're manipulating.
Otherwise you could remove all .ID1 content and then refill it, but it is not such a good way to do.
Instead of .append() use $(".ID1").html(list); this will replace the html of .ID1, while append will add to the current content.
Adding the code
$('.ID1').html('');$('.ID2').html('');
below
$getJSON
Will remove the cache from previous sessions and it works.
I have some "Learn More" links on my Home page, all of which correspond to different sections of content that is on the More Info page. These different sections of content are all hidden using display: none.
What I'm wondering is if there's a way to make it so that when I click a particular "Learn More" link, the user will be sent to the More Info page, and the section of content corresponding to the Learn More link they clicked will be shown.
I can't think of a way to achieve this, but I'm hoping it will be possible, perhaps using JavaScript.
EDIT:
The code I currently have is nothing special. Four <a> links on the Home page, then on the More Info page, four divs that are all initially hidden using display: none.
The solution ended up being fairly simple, I did what is described in the top answer of this question: Getting URL hash location, and using it in jQuery
Learn more
<script>
function showContent(id) {
$("#"+id).show();
}
</script>
I think it is possible.You can take the information on a div,and then you click "Learn more",show the div.
In this way,you even needn't a hyperlink,just a click event,like the code upstairs.Of course,this div was hidden before.
One way you can achieve this would be to add a hash to that link with the id of the section you want to show, like this: Learn More. Then just check for it in window.location.hash on the /moreinfo page and show the div.
You have to do it this way: try to use named anchors.
first:
Learn More
when use clicks this link user will navigate to particular page with different sections.
second:
on this page suppose you want to show the 3rd section:
.....
<a name='section-3'></a>
<h1>Your section-3</h1>
In your case divs are hidden then use js or jQuery for this:
As you will get a hash in the location url then use .substr()' and.indexOf()` javascript methods.
try to put this script on those page where you are having your hidden divs
$(function(){
var url = window.location.href;
var obj = url.substr(url.indexOf('#'));
$(obj).show();
});
I am working on a new site TheDigitalScale and I am using jQuery to create a feature list that expands a div when clicked and closes the div with another click.
<script type="text/javascript">
$(document).ready(function()
{
//hide the all of the element with class msg_body
$(".msg_body").hide();
//toggle the componenet with class msg_body
$(".msg_head").click(function()
{
$(this).toggleClass("msg_head2").next(".msg_body").slideToggle(100);
});
});
</script>
<div class="msg_list">
<p class="msg_head">They Forgot The Buttons</p>
<div class="msg_body"><p>
Just kidding. The MXT has nifty touchscreen controls so you never have to worry about buttons getting dirty or broken.
</p></div>
</div>
It works fine and all but, I also have a product review link that uses the JavaScript do_PostBack function to expand a review panel.
Review and Rate this item
When the review link is clicked, it causes all of the jQuery divs to expand.
When I set enablepartialrendering to false and it "fixes" the problem but when the review link is clicked it takes the user to the top of the page and expands the review panel rather than just expanding the review panel and keeping the user in the right spot.
I hope I explained this well enough; I am very new to jQuery, JavaScript and AJAX.
Regards,
Shala
EDIT:
I suppose I didn't really ask a question so...
What can I change to make the review link expand the review panel and keep the user in the area without also expanding every one of the jQuery divs?
Here is a link to a product page: MBSC-55
It looks like you have nested updatepanels. Try setting the UpdateMode property of the parent panel to Conditional to prevent the child updatepanel from triggering the parent updatepanel.
Okay, I think I see what's happening. When your page loads you execute this code:
$(document).ready(function(){
//hide the all of the element with class msg_body
$(".msg_body").hide();
//toggle the componenet with class msg_body
$(".msg_head").click(function() {
$(this).toggleClass("msg_head2").next(".msg_body").slideToggle(100);
});
});
Now, when .net does the postback it is re-creating those .msg_body and .msg_head elements. The best solution would be to get .net to not replace those (unless you need them to).
If you need those to re-draw, you can do 2 things. First, set .msg_body to be hidden in your css, that way they are hidden by default. Then to handle the click issue, replace your click code with this:
$(".msg_head").live("click", function() {
$(this).toggleClass("msg_head2").next(".msg_body").slideToggle(100);
});
This will cause the click handler to still work for newly added .msg_head items.