So I have some working JS code on my site which swaps on div to another div once the link has been clicked. However I currently have it work on top of an iframe by overlaying a clear gif which is the link and it works perfectly.
Now I want to apply it to a button which is pressed on our site to create a download - I can't use the same invisible gif trick as the button has a mouse over effect which then doesn't work so I want it to happen some other way when clicking on the button. The function which currently works is loaded in the header as…
function yourFunction(){
document.getElementById('yourfirDiv').style.display='block';
document.getElementById('yoursecDiv').style.display='none';
}
At the moment the link which triggers this is an image which works perfectly and looks as follows…
<a href="javascript:void(0)" onclick="var fileref=document.createElement('script');fileref.setAttribute('type','text/javascript'); fileref.setAttribute('src', 'http://url.com/locker.js?guid=0512eafd69b18d22');document.body.appendChild(fileref); setTimeout(yourFunction, 3000);">
<img src="http://url.com/blank.gif" style="position: absolute; z-index: 500; width: 100%; max-width: 100%; height: 280px; ">
</a>
Now I need to apply this to do the same thing on this button…
<div id="yoursecDiv" style="display:block;">
<div id="downloadmp3">
<div class="download_button_div">
<form action="/download_file.php" method="post" name="downloadform">
<input name="file_name" value="<?php echo $fname; ?>" type="hidden">
<input name="bucket" value="<?php echo $bucket; ?>" type="hidden">
<button type='submit' class='download_button' title="Click to Download Mixtape!">Download</button>
</form>
</div>
</div>
</div>
Someone gave me some simple JS which is as follows which should trigger when a div name is clicked to trigger the function which swaps the named divs, however it doesn't work, the code snippet is…
$("#clickablediv").bind("click",function(){
yourFunction();
});
To make things slightly more complicated, the page is a floating page launched with ajax, so any code like the above has to go in the sites JS file in the part which loads the page if it needs to be loaded on launch of a portfolio. In the case of the link above the function code loads in the global site header just fine and the inline JS works fine - perhaps there is a way to apply that link to my button divs somehow, simple inputs very welcome!
I think isherwood is correct in that you're overcomplicating things.
However, try this:
$(document).ready(function() {
$(document).on("click","#clickablediv",function(){
$('#yourfirDiv').show();
$('#yoursecDiv').hide();
});
});
Assuming #yourfirDiv has either style or class css with "display:none".
Then you can remove those pesky onclick attributes from the divs.
Related
I have created a jQuery Dialog for storing a hidden image, which will only be triggered by clicking a link. Some of the codes are as followed:
<div id="dialogdialog" style="background-color: white;">
<div>
<div style="clear: right">
<a href="#" class="closeDialogButton">
<div id="fitClose" class='sprite x' style="float:right;"></div></a>
</div>
</div>
<div>
<div id="fitLogoBlack" class='sprite black-logo'></div>
<br/><br/>
<img id="fitTitle" src="img/fitguide_title.jpg">
<img id="fitLogoBlue" src="img/blue.png">
</div>
<div>
<img src="img/topbanner01.jpg">
<br/>
<img src="img/slim02.jpg">
</div>
</div>
<a class="fit-guide" href="#fit-guide" target="_self" rel="nofollow" id="fitguidePic">Fit Guide</a>
<script>
$(function() {
$("#dialogdialog").dialog({
width: 900,
border: 0,
autoOpen: false,
modal: true,
resizeable: false,
dialogClass:"myClass"
});
$("#fitguidePic").on("click", function() {
$("#dialogdialog").dialog("open");
});
});
$('.closeDialogButton').click(function(e){
e.preventDefault();
$('#dialogdialog').dialog('close');
})
</script>
And the codes are working, the image can be hidden until I clicked on the link, however, occasionally when I refresh my page, I will see the hidden content appeared on the page for few seconds, but after the whole page is fully loaded, it will be hidden again. But this situation does not happened for every refresh.
I have no idea what this problem is caused. How can I stop the image popping up when refreshing? Thanks!
Add this to your CSS:
#dialogdialog {
display: none;
}
Because displaying of the page in the browser doesn't wait for Javascript to be fully loaded the dialog is sometimes visible, because it is visible by default. jQuery will later 'overwrite' this initial setting by attaching CSS directly to the element.
How can I stop the image popping up when refreshing?
By using vanilla js (raw js). Why ?
I have no idea what this problem is caused.
This is because jQuery (if properly set) is loaded only after the whole document has loaded. So when you refresh the image appear first and then the code hidding it is loaded after that. Anytime there is a delay and the loading is slow, you will see the picture before it is hidden if using jQuery.
Alt solution : you can load jQuery without waiting for the document to fully load but your code might break and this is generally a really bad idea. jQuery works only on whole documents.
display: none; on #dialogdialog
i'm working on a HTML5/bootstrap app that need for several reason to be a single page app.
i'm looking on a way to 'simulate' multipage on a single page
for example to hide "customer" "partner" "subscriver" section when profile section is shown
i'dont want that users can scroll down from one section to another
i really need to have a single page, so librairy like pagify doen't work and iframe doesn't work as well
any idea ?
thanks
Why not something like: http://getbootstrap.com/javascript/#collapse If you use Bootstrap you can hide and show div's on the fly.
Greets,
Michel
If I understand your problem correctly, you want to keep everything on one page, but only show one section at a time. You can do this with javascript by hiding all the divs using CSS, then setting each nav button click to show the corresponding div:
<input type="submit" id="custbtn" value="Customers" />
<input type="submit" id="partbtn" value="Partners" />
<input type="submit" id="subbtn" value="Subscribers" />
<div id="customer">
Customer stuff
</div>
<div id="partner">
Partner stuff
</div>
<div id="subscriber">
Subscriber stuff
</div>
$("#custbtn").click(function(){
$("#customer").show(1000);
$("#partner").hide(1000);
$("#subscriber").hide(1000);
});
$("#partbtn").click(function(){
$("#customer").hide(1000);
$("#partner").show(1000);
$("#subscriber").hide(1000);
});
$("#subbtn").click(function(){
$("#customer").hide(1000);
$("#partner").hide(1000);
$("#subscriber").show(1000);
});
Fiddle
I was hoping someone could help...I'm new to Jquery ....all I want to achieve is a click through on a hyperlinked image but this occurs when a completely separate div on another part of the page is clicked on rather than the hyperlinked image I just mentioned. .......the hyperlinked image needs to be invisible also. In case anyone is wondering why I need this ....it's because I want my own custom button rather than the standard one that comes with a CMS that I'm using and it can't be changed....it's basically a work around the owners of the system suggest.
Here's what I thought would work
<style>
#my-custom-button{
margin: 0 auto;
width: 200px
}
#the-standard-button{
display : none
}
</style>
<div id="my-custom-button">
<img src="../images/order-now.png">
</div>
<div id="the-standard-button">
<?php
proprietary PHP here that renders the standard button
?>
</div>
<script type="text/javascript">
<!--
$(function(){
$("#my-custom-button").click(function(){
$("#the-standard-button").click();
});
});
-->
</script>
The whole
<?php propiertary blah blah ?>
makes it hard to decipher but my guess is that the handler is being generated for whatever is being created by php, i.e. the php generates
<button id="phpButton">
blah
</button>
and then a handler like
$("#phpButton").click(....)
Notice that the handler is NOT on "#the-standard-button". So, you need make sure that you are using the correct selector when calling the click() in $("#my-custom-button").click(...)
Check out this jsFiddle. Notice which secondary click event is fired.
I'm not sure I understand your question perfectly, if what you want is that when You click on one button it will act as though the other was clicked.
Here is a solution that will work IF the default button is also an anchor tag (<a>)
HTML:
<div id="newButton">
<img src="/theimage.jpg"/>
</div>
<div id="oldDiv">
<img src"oldImage.png"/>
</div>
JQuery:
jQuery(document).ready(function($){
$("#oldDiv").hide();
$("#newDiv > a").click(function(){
window.location = $("#oldDiv>a").attr("href");
});
});
I got a page. Its a key shop website.
I want to make that when the customer clicks on the icon, for example windows7, it removes the other products beside it, and write its description and payment button.
I already succeeded in not allowing the page to refresh, and only view the content.
But the problem is the tab; I want to change it in the end of the page, and whenever I click on the icon for windows7 it opens to me the page I want, but from the top.
I'am using the following code:
<script>
$("div.haha").tabs("img.one > div", {effect: 'ajax'});
</script>
i just want it to change content and not to start from top
<div id="haha">
<img class="one" src="imgs/product1.png">
<img class="two" src="imgs/product2.png">
<img class="three" src="imgs/product 3.png">
<img class="four" src="imgs/product4.png">
</div>
Actually to access div with "haha" id you should use
$("div#haha")
selector.
I am changing the code, because I had this code on hand and it works pretty well from what I've seen and appears to fit all your needs.
Javascript: (tested with jquery 1.9.1)
<script type="text/javascript">
$(function(){
$("a[rel='haha']").click(function(e){
e.preventDefault();
/*
if uncomment the above line, html5 nonsupported browers won't change the url but will display the ajax content;
if commented, html5 nonsupported browers will reload the page to the specified link.
*/
//get the link location that was clicked
pageurl = $(this).attr('href');
//to get the ajax content and display in div with id 'haha'
$.ajax({url:pageurl+'?rel=haha',success: function(data){
$('#haha').html(data);
}});
//stop refreshing to the page given in
return false;
});
});
</script>
html example:
This is the code outside the div. This shouldnt be effected.
<br /><br />
Here are the links outside the div to show you how it works. IMG 2 will refresh page and change url because rel="haha" is missing from the url<br />
IMG 1
IMG2 - NO REL
IMG3
RESET
<br />
<br />
<br />
<div id="haha" style="border: 1px solid #ccc;">
IMG1
IMG2
IMG3 - NO REL
</div>
Just know, any link you want to load into the div needs a rel="haha" (which can be changed to whatever you want to call it). If you want the page to load completely (like changing pages), just leave out the rel="haha" from the url.
Demo of how the code works: http://kygar.com/code/haha.php
I have the following code:
<a class="button" href="javascript:ShowHide('elaborate_1')" style="font-size:24px; padding:0 10px; margin-left:10px;">COLLAPSE</a>
<div id="elaborate_1" class="expandable-box" style="display:none;">
<div class="description"><?php //USE THIS CLASS 'description' ON A 'div' TAG FOR A GRAY BOX TO DISPLAY CONTENT ?>
<p class="nomargin nopadding">HELLO</p>
</div><!-- .descpription -->
</div>
The web page currently hides this message "hello" until I click "COLLAPSE" however I want the content to be shown automatically until I click "collapse.
How can I do this?
Change the display:none to display:block on your elaborate_1 div.
Remove the display:none from the containing element:
<div id="elaborate_1" class="expandable-box">
If your ShowHide function is correct, it should work just like that. If not, you should post the code from the function.
Just remove style="display:none;" from your html element
and add following code to your js function (for reference)
document.getElementById("elaborate_1").style.display = "block";
Personally I would suggest taking a look at JQuery. It allows you to take advantage of controlling various effects, like show, hide, toggle, fade, and custom animation, etc. Here is the link: http://api.jquery.com/category/effects/ which might be useful to you.
A little Jquery sample code:
$('a.button').click(function(){
$('#elaborate_1').toggle("slow");
});