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
Related
List item
I am using the following code to hide a div and show the other.
page1
<a id="show" href="2#dk" onclick='document();'>mylink</a>
<a id="show1" href="2#dh" onclick='document();'>mylink</a>
page 2
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#show").click(function(){
$("dk").show();
$("dh").hide();
});
$("#show1").click(function(){
$("dh").show();
$("dk").hide();
});
});
</script>
</head>
<body>
<div id="dk">mylink</a>
<div id="dh">mylink</a>
</body>
</html>
This works on one page but not after the anchor tag loads up another page.
PREMISE
I have pages:-
first
second
I want links on on page and divs on second page
frist page links
divs
OBJECTIVE
If the page is first page, links need to be on this page
If the page is second page, then I wish to hide the divs that are not link to the link thats clicked
you can see here what i mean even i will put account detials that ppl can look at code and try if they want
http://testscripten.enjin.com/login
username:testscripten
password:test12345
go to admin and then edit
page layout and next to text will a pencil to change html or java
I think you can use window.location.href to get the link of the page you're currently on and then accordingly hide/show your buttons.
JAVASCRIPT
var pageName = window.location.href;
$(document).ready(function(){
if(pageName === "dh"){
$("#show").show();
$("#show1").hide();
} else if(pageName === "dk") {
$("show1").show();
$("show").hide();
}
});
HTML
<a id="show" href="dk">mylink</a> <!--No need for onclick if you're using jQuery-->
<a id="show1" href="dh">mylink</a> <!--No need for onclick if you're using jQuery-->
I am not sure of "dk" and "dh" being real links, if you have kept those as placeholders then this should work.
Simply show/hide based upon the path name containing the strings you specify:
$(document).ready(function(){
$('div.toShowOnFirstPage').toggle(location.pathname.indexOf("first")!== -1);
$('div.toShowOnSecondPage').toggle(location.pathname.indexOf("second")!== -1);
});
use AngularJS and SPA model to avoid page reload.
You can use also variables in url
If you need to reload page and have values on different pages you have to set cookie or webStorage http://www.w3schools.com/html/html5_webstorage.asp
Why don't you use php?
I am having a webpage load another webpage inside an iframe that takes up the entire screen. I have 2 div's that are on top of each other. These divs are actually anchors that direct to a new url (an action). What I am trying to do is once any of the divs is clicked, to initiate an onclick event that will go to the url specified in that anchor href, and then reload the initial index.html page. My class is working on a local enviroment to teach us a thing called clickjacking. Below is my current html.
The issue im having is I can have the anchor click go to the url I want, but then I am no longer in my index.html. Is it possible to open the referenced link in a new window, close the new window once its loaded and then refresh the index.html page. Once that is done to hide the div that was clicked since the "second" div is hidden behind the top most clickable div.
<html>
<head>
</head>
<body>
<center>
<!-- Two anchor divs that are clickable and on top of each other -->
<div id="secondDiv">
<a href="http://www.2ndURL.com" id="m2">
<div id="2" style="position:absolute;top:195px;left:10px;width:10000px;height:200px;">
<iframe>
</iframe>
</div>
</a>
</div>
<div id="firstDiv">
<a href="#" id="m1" onclick="myFunction(); return false;">
<div id="1" style="position:absolute;top:195px;left:10px;width:10000px;height:200px;">
<iframe>
</iframe>
</div>
</a>
<!-- Main iFrame where user interacts -->
</div>
<iframe id="new" src="http://www.mywebpage.com" style="opacity:1.0;width:100%;height:100%;">
</iframe>
</center>
</body>
<script>
function myFunction(){
var newWindow = window.open("http://www.actionURL");
newWindow.close()
var myWindow = window.open("file:///home/seed/Desktop/index.html", "_self");
}
</script>
</script>
</html>
TLDR:
Load iframe in webpage
click on anchor div on page that directs to a new url
load that url, once loaded go back to the index.html (all in one tab) (step 1)
hide the anchor div that was selected-- allowing second anchor to be
clicked
Thank you for your help.
It looks like you might need to "fake" the onclick if you want to have an onclick action work on the page you are on. You will need to modify the parameters, but here is a code that I have used:
$(function() {
// find out what our query parameters contain.
var query = location.search;
// isolate the position of the equal sign.
var equalIndex = query.indexOf('=');
// extract the image's id.
var imageId = query.substring(equalIndex + 1);
// click on the appropriate image.
$('#' + imageId).click();
});
The comments explain what each step of the code performs. In my case, I needed the page to load and then force the onclick using the unique image ids. In your case, you will need to tie it to your unique div. I hope that this helps you get started.
I'm having a problem on how will I target, here's the scenario, whenever I click the links Home, or food or resort etc. the contents of it should be outputted on the display below. What always happen is that when I click those links It always goes to a new tab. What I wanted is that it should display on the same page and on a given div. Please help me, I've been trying to search the internet but different results are coming up.
Here are my links
<div id = "panel">
<p>
<a href = "home.html" target = "display">
<font color ="white">Home</font
</a>
<a href = "resort.html" target = "display">
<font color ="white">Resort</font>
</a>
<a href = "hotel.html" target = "display">
<font color = "white">Hotel</font>
</a>
<a href = "food.html" target = "display">
<font color ="white">Food</font
</a>
<a href = "rates.html" target = "display">
<font color="white">Rates</font>
</a>
<a href="reservation.html"target="display
<font color="white">Reservation</font>
</a>
<a href = "contact.html" target = "display">
<font color = "white">ContactUs</font>
</a>
</p>
</div>
This is where the content should be put in
<div id="display">
<iframe name="display"></iframe>
</div>
If I understand the question--and I really don't--I think you're problem is pretty easy to fix. Just change this:
<name = "display">
To:
<iframe name="display">
I'm assuming you want to load those links inside an iframe, yes? Otherwise what you want to do will require javascript. But again, I'm not sure I understand.
There is no <name> tag in HTML, but there is a name attribute
Edit to explain iframes:
iframes load one web page B inside of webpage A, but the two are still separate pages. The "box" is probably the border of the iframe itself. The scrollbar appears when the content of webpage B is too large for the iframe to display everything at once. To get rid of the scrollbar, you can either make the iframe larger or make the content of webpage B smaller.
Making an iframe larger is no different than making any other element larger: just change it's CSS.
I have tried this. Use this code <JsFiddle Link> :
At first load the jQuery:at the top of the code
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
Then add this jQuery code at the bottom of the file. In this code you will just check when an anchor tag is clicked and then return false which will prevent the anchor tag click submission. As well as load function will load the desired file of the "href" attribute.
<script>
$("a").on("click", function(){
//alert($(this).attr("href"));
$( "#display" ).load( $(this).attr("href") );
return false;
});
</script>
NB: If you are running this in local server there is no problem. You also can load .php file in it. But if you are running it in Windows explorer or linux file system then open it in firebox.
yes crowhill is right. i think you want to have a single page website. then you have to write all the contents in a single html page with different divs for different contents which you want to display using the links and use the id of the divs in the href part of your tag (i.e. ).
i think this will clear your query.
https://www.freshdesignweb.com/free-one-page-wordpress-themes/
I have the following code on a page on my site — when the user clicks on the image a sound plays:
<script language="javascript" type="text/javascript">
function playSound(soundfile) {
document.getElementById("dummy").innerHTML=
"<embed src=\""+soundfile+"\" hidden=\"true\" autostart=\"true\" loop=\"false\" />";
}
</script>
<span id="dummy"></span>
<div id="soundimage">
<img src="image.png" />
</div>
It all works great, but the image is at the bottom of the page, and when the user clicks the image they are redirected back to the top of the page. Is there any way to get this working so that there is only an audio change, and not a visual one (if that makes sense!)?
When using a mouseover function instead, such as
<a onmouseover="playSound('sound.mp3');"><img src="image.png" /></a>
the user remains where they were on the page, but I would like them to have the option of playing the sound on click and not on rollover.
The problem is your href attribute. # as an anchor sends it to the top of the page. Use
...
Also, always include an href attribute to links.
You can (and I think is more correct in cases where Javascript support is limited), to use a link like:
...
instead of Grexis one, because if the browser you're using doesn't support Js, then the "onclick" event will never be fired and thus Js won't be read. It won't be a problem, probably, but still you should consider using better coding techniques.
instead of having the onclick event in an a tag, get rid of it and put it on the img tag. if you like the cursor for links, you can change the style too.
Example code has been indented so it actually shows in the post.
<img src="image.png" style="cursor:pointer;" onclick="playSound ('sound.mp3')" />
I want to use fancybox to popup a message if a certain button is clicked.
I want the fancybox message to only contain some text,
and a 'close' button, i dont mind using the default button if there is one.
can someone give an example of how it should be written in the html page and the js page?
any help will be much appreciated!
Assuming your button has an id of yourButton:
$("#yourButton").click(function () {
var content = $("<div>Hello<br /><br /></div>");
var button = $("<input type='button' value='Close Me!' />");
content.append(button);
$.fancybox({ content: content });
$(button).click(function () { $.fancybox.close(); });
});
This should be able to help you:
http://fancybox.net/howto
Once you have required all the relevant files, to hook it up to all linka, use this:
$("a").fancybox();
If the html is complicated enough you might prefer putting it in a hidden div as I've done below. This is a scaled down version of code I'm running on my site to do a fancybox dialog box. Works with FancyBox version 1.3.4 (I haven't upgrade to 2 yet). Personally, I like the default close button (circle X in top right corner) and even pressing Escape works, but I've added a custom close button to the popup. It includes javascript to close FancyBox.
<a id="mylink" href="#mypopup">link style button</a>
<div id="mybutton">button</div>
<div style="display:none">
<div id="mypopup">
<h1>My Title</h1>
<p>My Message</p>
<!--... other complex html can go here ...-->
<input type="button" onclick="$.fancybox.close();" value="Custom Close Button" />
</div>
</div>
<script type="text/javascript">
$('#mylink').fancybox();
$('#mybutton').click(function() {
$.fancybox({
'orig' : $(this),
'href' : '#mypopup'
})
});
</script>