To those jQuery experts out there. I have the following markup and code:
<html>
<head>
<title>Test Framework</title>
<script src="js/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.nav').click(function(e) {
e.PreventDefault();
var id = $(this).attr('id');
var path = "views/" + id + ".html";
$("#main").load(path);
});
});
</script>
</head>
<body>
<div id="links">
<a class="nav" id="test" href="javascript:void(0);">Test Page</a>
</div>
<div id="main">
</div>
</body>
</html>
My nav class fires when I click the link, but fails to get past the PreventDefault method. The class fires, but nothing loads into my div. The page is definately there. Any ideas why this wouldn't be working?
The problem may be with your call to preventDefault:
$(document).ready(function(){
$('.nav').click(function(e) {
e.preventDefault();
var id = $(this).attr('id');
var path = "views/" + id + ".html";
$("#main").load(path);
});
});
Related
I'm new at Jquery and Javascript. I was trying to modify this example at: w3schools to change to url from the initial: www.w3schools.com to the second one at: www.w3schools.com/jquery and back again to the initial one when click on the button (as many times as desired), but I can not figure out how to do it. Please, include all the code in the answer, it will be easier. Thanks.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#w3s").attr("href", "https://www.w3schools.com/jquery");
});
});
</script>
</head>
<body>
<p>
<a href="https://www.w3schools.com" id="w3s">
W3Schools.com
</a>
</p>
<button>
Change href Value
</button>
<p>
Mouse over the link (or click on it) to see that the value of the href attribute has changed.
</p>
</body>
</html>
First Hover the Link You Will See... www.w3school.com .... after click on button link change ... you can check it with hover the Link. Work Link as a toggle
https://www.w3schools.com/code/tryit.asp?filename=FGOSUXX5HUOG
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<p>W3Schools.com</p>
<button>Change URL</button>
<p>Mouse over the link (or click on it) to see that the value of the href attribute has changed.</p>
<script>
$(document).ready(function(){
$("button").click(function(){
var myURL = "https://www.w3schools.com";
if( $("#w3s").attr("href") === myURL )
$("#w3s").attr("href", "https://www.w3schools.com/jquery");
else
$("#w3s").attr("href", myURL);
});
});
</script>
</head>
<body>
</body>
</html>
You can just use a basic if-else and check the href attribute.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
var w3schoolURL = "https://www.w3schools.com";
if( $("#w3s").attr("href") === w3schoolURL )
$("#w3s").attr("href", "https://www.w3schools.com/jquery");
else
$("#w3s").attr("href", w3schoolURL);
});
});
</script>
</head>
<body>
<p>W3Schools.com</p>
<button>Change href Value</button>
<p>Mouse over the link (or click on it) to see that the value of the href attribute has changed.</p>
</body>
</html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var w3 = "https://www.w3schools.com";
var w3Jquery = "https://www.w3schools.com/jquery";
var toggleFlag = true;
$("button").click(function(){
if(toggleFlag){
$("#w3s").attr("href", w3Jquery);
}
else{
$("#w3s").attr("href", w3);
}
toggleFlag = !toggleFlag;
});
});
</script>
<body>
<p>W3Schools.com</p>
<button>Change href Value</button>
<p>Mouse over the link (or click on it) to see that the value of the href attribute has changed.</p>
</body>
I have index.php in which I would like when the user clicks the button "Click" it to redirect to "newpage.php" but also for another page "Click.php" to be loaded into the div "content" within the newly loaded "newpage.php".
Similarly I would like for when "Click Also" is clicked for the user to be redirected to the same page "newpage.php" but a different page "ClickAlso.php" to be loaded into the same div "content".
index.php
<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(document).on('click', '.clickme', function() {
window.location.replace("newpage.php");
});
$(document).on('click', '.clickmealso', function() {
window.location.replace("newpage.php");
});
});
</script>
</head>
<body>
<div>
<button class="clickme">Click</button>
<button class="clickmealso">Click Also</button>
</div>
</body>
</html>
newpage.php
<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript">
$(document).ready(function() {});
</script>
</head>
<body>
<div id="content">
</div>
</body>
</html>
Try this solution:
index.php
change your document ready event to redirect to newpage.php using url params. For this example I used a parameter named 'page'.
$(document).ready(function() {
$(document).on('click', '.clickme', function() {
window.location = ("newpage.php?page=click");
});
$(document).on('click', '.clickmealso', function() {
window.location = ("newpage.php?page=clickAlso");
});
});
newpage.php
Define what happens once the page is accessed. This is where things get a bit more interesting. Each time this page (newpage.php) loads, it looks for the parameter 'page' in the URL and extracts its value. The parameter's value is then assigned to a variable I called $pageToGet.
After that we check whether the value is equal to 'click' or 'clickAlso' and we display the content accordingly using require.
<?php
$pageToGet = $_GET['page'];
?>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
</head>
<body>
<div id="content">
<?php
if ($pageToGet == 'click') {
require('Click.php');
} elseif($pageToGet == 'clickAlso') {
require('ClickAlso.php');
}
?>
</div>
</body>
</html>
Be sure to have your files: Click.php and ClickAlso.php in the same directory for this to work.
Good Luck
I have a Javascript file named loader.js which contains a function called initialize(). I want to call this function via jQuery. This is my HTML file:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="loader.js" ></script>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery(document).on("click", ".link", function(e) {
e.preventDefault();
var a= $(this).text();
window.initialize= function{
};
initialize(a);
});
});
</script>
</head>
<body >
<h1>welcome to my website </h1>
link1
link2
<div id="main">
</div>
</body>
</html>
This is loader.js:
function initialize(a) {
$('#main').html= a;
}
I do not know what is wrong with this script, I have debug it jquery is working fine but funtion is not working correctly.
also I want that whenever the function is clicked again the div should be refreshed for example first it contain link1 but when link2 is clicked link1 should be removed inside the div how can i accomplish this task????
thanks in advance
You're not including the loader script. Add <script src='loader.js'></script> before the jQuery code.
The code in loader.js should be inside a jQuery(document).ready callback since it's now using jquery (the html method).
Also as #jiihoo pointed out you should use $('#main').html(a); instead of $('#main').html = a;.
You should change to code of loader.js to this.
function initialize(a) {
$('#main').html(a);
}
Heres the whole thing you could do.
Html
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"> </script>
<script src="loader.js"></script>
</head>
<body >
<h1>welcome to my website </h1>
link1
link2
<div id="main"></div>
</body>
</html>
Loader.js
jQuery(document).ready(function() {
jQuery(document).on("click", ".link", function(e) {
e.preventDefault();
var a = $(this).text();
initialize(a);
});
});
function initialize(a) {
$('#main').html(a);
}
So I've got a show/hide script I use on my website that works great. However there's 1 issue and one request.
Need to allow only 1 div at a time to show
When the div appears, to
have it 'slide' in from underneath the header.
Here's the script:
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
Here is how the buttons work in relation to the div's in the HTML:
<a onclick="toggle_visibility('testing');">Testing</a>
<div style="display:none;" id="testing">
testing for page 2
</div>
Here is the layout of the screen in regards for the slide animation:
If anyone could help with adding these functions to the script or they have a different script that does the same thing but better please let me know.
Thanks
If you want to go with jQuery, then take a look at slideToggle():
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
var activeDiv = 'welcome';
function toggle_visibility(id) {
if ( activeDiv === id ) return;
$('#' + activeDiv).css('display','none');
activeDiv = id;
$('#' + id).slideToggle();
$('#' + id).css('display','block');
};
$(document).ready(function() {
$('#welcome').slideToggle();
});
</script>
</head>
<body>
<a onclick="toggle_visibility('testing');">Show the First DIV</a><br>
<a onclick="toggle_visibility('testing2');">Show the Second DIV</a>
<div style="display: none;" id="testing">
The First DIV
</div>
<div style="display: none;" id="welcome">
Welcome!
</div>
<div style="display: none;" id="testing2">
The Second DIV
</div>
</body>
</html>
<!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(){
$("p").slideToggle();
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button>Toggle slideUp() and slideDown()</button>
</body>
</html>
how to share url + parameter using addthis social plugin?
I had read the addthis api, But I can not find whey to add my parameters.
http://support.addthis.com/customer/portal/articles/381263-addthis-client-api
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>hello world</title>
</head>
<body>
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
<script type="text/javascript">
var addthis_config = {
// I want to share link as this url + my_defined_paramater, how to set?
url: location.href+'refer_id=1900' //not correct
};
</script>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#username=addthis"></script>
<!-- AddThis Button END -->
</body>
</html>
Looks like you may need an ampersand in your url. Everything else looks fine from what the API docs show.
var addthis_config = {
// I want to share link as this url + my_defined_paramater, how to set?
url: location.href+'&refer_id=1900'
//^^^
};
I found some items in the support section. Hopefully this will help.
Support page
Basically, it says you can add an attribute called addthis:url to set a custom URL. Since you need the current page, you'll have to update it with JavaScript's setAttribute() method.
<div class="addthis_toolbox addthis_default_style" id="addthis_container">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
<script type="text/javascript">
var addThisCont = document.getElementById("addthis_container");
var curUrl = location.protocol + "//" + location.href;
var withGetVariable = curUrl + "?refer_id=1900";
addThisCont.setAttribute("addthis:url", withGetVariable);
</script>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#username=addthis"></script>
You should use below code:
addthis_share = {
url_transforms : {
add: {
oReferrer: LoggedOfficeGuid
}
}
}