Jquery back button - javascript

(sorry for my bad English)
I checked all posts about Jquery back button here and for some reason nothing worked with me so please help me...
I simply want when I run Jquery function by clicking on a link with hash, the browser will shows me the back button.
When I click the back button I want it to run the previous function.
here are the codes...
<!DOCTYPE html>
<head>
<script src="jquery.min.js" type="text/javascript"></script> //jQuery v1.10.2
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="prodmenu">
Link1
Link2
</div>
<script>
$("#link1").click(function() {
$("#div1").fadeOut();
$("#div2").animate({top:'500px'},"slow");
});
</script>
</body>
</html>
Thanks a lot.

You can use this jquery plugin for the #hash history.
Here is an example.

Related

Need to understand JQuery load on click on a link flow and mistakes in my code

I am trying to make my 10 pages static website dynamic so that everytime i don't need to design every page as the same home page. I have tried few jquery statements to load data into div on click of a link.
I have tried the following code and it didn't work:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("button").click(function() {
$("#div1").load("demo.txt");
});
$("#link").click(function() {
$("#div1").load("demo.txt");
});
});
</script>
</head>
<body>
<div id="div1">
<h2>Let jQuery AJAX Change This Text</h2></div>
<button>Get External Content</button>
<br>
<br> click here </body>
</html>
I have got this from W3School's online Tryit editer. It works fine there but not in my local webpage on my machine. Can I get an explanation what is happening and what I am missing. Thanks.

How to set real time input value to link through iFrame?

Please see below 2 HTML pages, I have 1 page inside iFrame call other page.
what I exactly need, I want in "iframe.html" you can see text field. when I write something in that input box, real time that value should take inside href=""
Note : iframe.html page is pure html page. I can't use jquery inside that page. I have to access that page from index.html page.
I have tried some jquery code, but only I wrote function.
this is index.html page.
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
</head>
<body>
<iframe src="iframe.html" id="myframe"></iframe>
<script type="text/javascript">
$($("#myframe").contents().find('body')).on("click", 'a[href="#editable-link"]', function(e) {
});
</script>
</body>
</html>
And this is "iframe.html" page.
<html>
<head>
<input type="text" placeholder="Enter URL">
Read More
</body>
</html>
can anyone help me to resolve this problem. it will very helpful.
thanks in advance.
Try
$('#myframe').load(function(){
$('#myframe').contents().find('input').bind('input',function(e) {
var url = $('#myframe').contents().find('input').val();
$('#myframe').contents().find('#editable-link').prop('href',url);
});
});

jQuery AJAX loading with multiple a href links

Hey guys I'm trying to get the following to work...
demo_test.txt to load into the "div1" container
only have a href id "test" to trigger it
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("test").click(function() {
$("#div1").load("demo_test.txt");
});
});
</script>
</head>
<body>
<div id="div1">
<h2>Let jQuery AJAX Change This Text</h2>
</div>
<a id="test" href="#">Get External Content</a>
<br>
<a id="google" href="http://www.google.com/">Google</a>
</body>
</html>
Currently it doesn't run, but if I remove the Google line, it works. Is there something else I'm missing? Thanks!
Change your jQuery click handler to this:
$("#test").click(function() {
I've added a # in front of test to properly select your anchor tag.

Balloon message on element using jQuery

I want to show balloon message with a title when I mouse over some element in my site. I see jQuery code but I don't know if I used it in a correct way or not.
This is my code:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
</script>
<script type="text/javascript" src="./js/jquery.balloon.js">
</script>
<script>
$(document).ready($(function() {
$('#style1').balloon({ position: "bottom right"});
});
</script>
</head>
<body>
<div id="wrap">
<button id="style1" onclick="getValue('./CSS/style1.css')">style1</button>
</div>
</body>
can you help me this link i used http://file.urin.take-uma.net/jquery.balloon.js-Demo.html
There are a couple things that could be wrong and some certainties.
The balloon plugin only makes a balloon if the target element has a title attribute. Your button doesn't.
Make sure it has a title attribute.
Make sure your js file exists at given location ./js/jquery.balloon.js , try pressing f12 and go to the console tab and see if you spot any errors.
Add title attribute to your button
<button id="style1" onclick="getValue('./CSS/style1.css')" title="Some">style1</button>
JsFiddle example
Title is missing.
<
button id="style1" onclick="getValue('./CSS/style1.css')" title="YourTitleHere" >
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
</script>
<script type="text/javascript" src="./js/jquery.balloon.js">
</script>
<script>
$(document).ready($(function() {
$('#style1').balloon({ position: "bottom right"});
});
</script>
</head>
<body>
<div id="wrap">
<button id="style1" onclick="getValue('./CSS/style1.css')" title="YourTitleHere">style1</button>
</div>
</body>

Calling a Script when button clicked

In a jquery mobile webpage, I would like to call a script defined within script tags in the HEAD section of the jsp.
<head>
<link rel="stylesheet" type="text/css" href="jquerymobile/jquery.mobile-1.0a1.min.css" />
<script type="text/javascript" src="jquerymobile/jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="jquerymobile/jquery.mobile-1.0a1.min.js"></script>
<script>
$("#button").click( function()
{
alert('button clicked');
}
);
</script>
</head>
<body>
<html:errors/>
<div data-role="page" data-theme='a'>
<div data-role="header">
<h1>jquerymobile</h1>
</div>
<div data-role="content">
<div id="button" data-role="button">Click on button</div>
</div>
</div>
</body>
When the Button is clicked, I want the alert to be shown. But nothing happens when the button is clicked.
Could someone tell me where I am going wrong?
EDIT1:
The following code brings up the alert in Firefox & Opera Desktop Browsers.
$(document).ready(function() {
$("#vbutton").click(function() {
alert("clicked");
});
});
<a id="vbutton" data-role="button">Click Button</a>
Any reason why the same does not work with Opera Mobile & Fennec browsers - where it shows the Error Loading Page dialog??
Your problem is that you are searching for $('#button') before it exists...
Try wrapping your jQuery code in a $(document).ready(function(){ ... }) or its shorthand alias jQuery(function(){})
The other option is to include your initialization of the click event on the button until AFTER the #button exists in the DOM. In other words, you can move your <script> tag to the bottom of the page and it should work.
The problem was due to debug statements like
debugger;
debug.info(....)
which were understood by Firefox/Firebug, but were causing problems in Fennec & Opera Mobile browsers.

Categories

Resources