Running Javascript via href - javascript

<ul>
<a href="#Project">
<li onclick="project()">Projects</li>
</a>
</ul>
a tab appears and you can click on it, which runs a javascript function and also changes the url to www.demo.com#Project.
Is it possible when i give someone the link like www.demo.com#Project it loads the page and automatically runs function project()
EDIT SOLUTION
if(window.location.hash == "#Project") {
setTimeout('project();', 1);
}
else {
}
a timeout must be set so it loads the page first then execute function

No, script won't run if your give someone the URL. To achive this you should check whether window.location.hash equals '#Project' on page load.
Hope this helps
Btw. what Praveen Kumar mentioned is changing your code as follow:
<ul>
<li onclick="project()">
Projects
</li>
</ul>

I assume you want this to work on several different anchors, so you could do something like this:
<ul>
<li onclick="project()">
Projects
</li>
</ul>
<script>
function project() {
alert('Function project called')
};
var elements = document.querySelectorAll("a[href='" + window.location.hash + "']")
if (elements.length > 0)
{
elements[0].click();
};
</script>
This code will make sure any hash anchor gets clicked when you navigate to the url with that hash.

the link will be for example "www.test.com#myproject"
and "function project" will be run automatically
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<script>
function project()
{
alert("hello");
}
</script>
</head>
<body>
<div id="myproject">
<img src="test.jpg" onload="project()">
<a> sample text</a>
<p>123456789</p>
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</div>
</body>
</html>

A small example
If (window.location.hash === '#Project') {
project() ;
}

Yes it is possible. You dont have to do <a href="#Project">
<li onclick="project()">Projects</li>
</a> because it is a painful code. Try to do this:
`<ul>
<li>
Projects
</li>
</ul>`
It basically run the function called project() when you click the Projects. Base on your code your just navigating an element that has an id of Project.
You can also use
<ul>
<li>
Projects
</li>
</ul>
Then in projects.html run your script:
<script>
function project(){
alert("I am your function.");
}
project(); //Call the function
</script>

Related

Load dynamic content in div from different navbars

On one page, alphabet.php, in my project I have a sidebar further down on the page that loads diverse php-pages in a Content div. Like this:
HTML SideMenu
<nav id="sideMenu">
<ul class="list-unstyled components">
<li id="a">A</li>
<li id="b">B</li>
<li id="c">C <span class="caret"></span>
<ul>
<li id="c1">C1</li>
<li id="c2">C2</li>
</ul>
</li>
</ul>
</nav>
<div id="Content">
<h2>Lorem bla bla</h2>
<p>lorem bla bla </p>
</div>
JS
$(function() {
'use strict';
var newHash = '',
$content = $("#Content");
$("#sideMenu").delegate("a", "click", function() {
window.location.hash = $(this).attr("href");
return false;
});
$(window).bind('hashchange', function() {
newHash = window.location.hash.substring(1);
$content.load(newHash);
console.log(newHash);
});
});
The same content should be loaded also when you click the topmenu and footer navigation. And at the same time scroll to the Content div.
HTML MainMenu
<li class="dropdown"><a href="#alpha" class="dropdown-toggle" data-
toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
Alphabet <span class="caret"></span></a>
<ul class="dropdown-menu dropdown-menu-left" role="menu" id="alpha">
<li>A
</li>
<li>B
</li>
<li>C
<ul class="dropdown-menu dropdown-menu-left" role="menu">
<li>C1</li>
<li>C2</li>
</ul>
</li>
</ul>
</li>
I solved the JS for the main-menu with this code
$(function() {
'use strict';
if(location.hash) $('#Content').load(location.hash.substring(1));
$('#alphaa').click(function() {
$('#Content').load(this.hash.substring(1));
});
});
EDIT: I changed the URL in MainMenu to alphabet.php#a.php etc., and it loads the content into the div IF you are on the current page (alphabet.php). Not if you're on another page.
EDIT 2: Solution for the main-menu JS. Now everything works fine but I guess you could make it prettier without two different js functions for the main-menu and the side-menu, but for now I'm pleased with this. It works!
Here is how i am able to do the navigation
i wrote the links like:
<a class="nav-link" href="javascript:void(0);" data-href="/page1.html #div1">Page 1</a>
<a class="nav-link" href="javascript:void(0);" data-href="/page2.html #div2">Page 2</a>
<a class="nav-link" href="javascript:void(0);" data-href="/page3.html #div3">Page 3</a>
If you use javascript:void(0) in your href= then you don't need to call the event.preventDefault.
then in my scripting side i wrote:
$(window).on('load', function () {
$('.nav-link').on('click', function () {
var linkPage = $(this).attr('data-href');
if (linkPage !== undefined)
{
$('#content').load(linkPage);
}
});});
Note
One thing you need to make sure is that domain of the calling page and pages from which the data has to come should be the same or else you will have the cross-domain issue.
Edit 1
The #div1,#div2,.#div3 are basically the ids of the div on their respective pages from which the data has to be fetched.
for example if i have some content on my pages like this:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> Page 1</title>
</head>
<body>
<div id="div1">
hi i am the content of page 1
</div>
</body>
</html>
So, when someone clicks on the menu links the load function will go to the particular page (which is in our case the page1.html or any other) and return the HTML contents of div with id as div1 and load the data to the particular div(i.e. div with id content).
Edit 2
The JQuery's Load() is better explained on this Jquery Load you can use this to understand more about it.
So, what i think you are doing is you are creating a request to a /page1.html from the domain www.example.com, in that case load function will call the www.example.com/page.html and will load the contents of the page but if you make a request to other any other page let say /page11.html from the domain www.example.com/page2.html then the load() will create this www.example.com/page2.html/page11.html url which is not correct and hence it will not load any content.
So,what you can do is either you can put the whole url on the of the page i.e. www.yourdomain.com/page.html #divid in the attribute data-href or you can create the particular url on the javascript calling funciton like:
$(window).on('load', function () {
$('.nav-link').on('click', function () {
var linkPage = $(this).attr('data-href');
if (linkPage !== undefined)
{
var pageUrl = window.location.origin+'any other seperation for the pages
if any'+linkPage;
$('#content').load(pageUrl);
}
});
});
Here the window.location.origin is going to give you the domain on which the website is running regardless of hashes or slashes and then it will concate it with the linkPage and will make the proper url for the called page.

How can I select the first specific inner element?

Here is my HTML?
<ul>
<li>
<a href="./link1">
<div>something</div>
<span>link</span>
</a>
</li>
</ul>
And this is my jQuery code:
$('li').on('click', function(){
var link = $(this).find('a').attr('href');
})
As you see, there is two <a> tags. And .find() refersh to both of them. While I just want to select the <a> which is right inside (one level) in the <li> tag. So expected result is ./link.
What alternative should I use instead of .find() ?
You can use the direct descendant selector.
$('li').on('click', function(){ var link = $(this).find('> a').attr('href'); })
Try with eq(0) .It will get the first a tag
Or
Do with first('a')
$(this).children().first('a').attr('href')
$('li').click(function(){
console.log($(this).children('a').eq(0).attr('href'))
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>click
<a href="./link1">
<div>something</div>
<span>link</span>
</a>
</li>
</ul>
Method 1: Using Jquery's children and first
$('#myList').on('click', function() {
var link = $('#myList').children('a').first();
console.log(link.attr('href'));
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<ul>
<li id="myList">
<a href="./link1">
<div>something</div>
<span>link</span>
</a>
</li>
</ul>
Method 2: Using the immediate children selector >
$('#myList').on('click', function() {
var link = $('li > a:first');
console.log(link.attr("href"));
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<ul>
<li id="myList">
<a href="./link1">
<div>something</div>
<span>link</span>
</a>
</li>
</ul>
the first specific element
What alternative should I use instead of .find() ?
$(this).find('a:first')
seems like only logical solution and easy to read by developer
Don't do so. How is the browser meant to know which link to follow? It'd be invalid HTML
I suggest you using this instead:
startmiddleend
As you can see start and end are linked to page1 but the middle points to page2.

Detect event when class is added to li

Having html list as ,
<ul id="slider">
<li class=""></li>
<li class=""></li>
<li class=""></li>
<li class="selected"></li>
<li class=""></li>
<li class=""></li>
<li class=""></li>
<ul>
I am adding selected class to any of the li element.
Here i have added class="selected" to fourth li element.
Want to execute some code when class selected is added to any of the li element.
tried this one , but not working as expected.
<script>
$(function() {
$('#slider').bind('DOMSubtreeModified', function(e) {
alert("Changed");
});
});
</script>
Just invoke a function after you add the Class on the click event.
$(function() {
function doSomething() {
.....
}
$('ul').on('click', 'li' function(e) {
$(this).addClass('selected');
doSomething();
});
});
The best way to handle this is just to call your function when you add the class, since it's your code adding it.
There are two common ways to do that:
You might do that with a direct call:
li.addClass("selected");
doSomethingBecauseItChanged(li);
Or you can do it by raising your own event on the li element that other code can listen to, which more thoroughly decouples the code adding the class from the code responding to the change.
Here's the code listening for the event:
$("#slider").on("added-class", function() {
alert("Changed");
});
And here's the code adding the class and raising the event:
li.addClass("selected").trigger("added-class");
Note that added-class is a name I made up, not something that already exists. Use whatever name you like, just make sure not to conflict with existing event types.
Here's a complete example: Live Copy | Live Source
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>Event Example</title>
<style>
li.selected {
color: green;
}
</style>
</head>
<body>
<p>In two seconds, the third item will turn green and you'll see an alert.</p>
<ul id="slider">
<li class="">xxxxx</li>
<li class="">xxxxx</li>
<li class="">xxxxx</li>
<li class="">xxxxx</li>
<li class="">xxxxx</li>
<li class="">xxxxx</li>
<li class="">xxxxx</li>
</ul>
<script>
$("#slider").on("added-class", function() {
alert("Changed");
});
setTimeout(function() {
$("#slider li").eq(2).addClass("selected").trigger("added-class");
}, 2000);
</script>
</body>
</html>
Alternately, if you don't need IE support, you can use a mutation observer (support matrix), but frankly you really shouldn't need to use those if you control the code that's adding the class.
Register handler when you are adding the class.Something like this
$('li').addClass('selected').trigger('class-change');
$('#slider').bind('class-change', function() {
//do something
});
});

Reference in jQuery?

How can I change the code in jQuery which will be referred to the items above in the html?
Html code is as follows:
<div class="dramer">
<ul>
<li> </li>
<li> <a class="shares" href="#"> Click </a> </li>
<li> </li>
<li> </li>
</ul>
<div class="drops"> </div>
</div>
The code in jQuery:
$('a.shares').click(function (event) {
event.preventDefault();
event.stopPropagation();
$(this).next(."drops").slideToggle(400);    
});
Function in jQuery is designed to show and hide div located out of the reach <li> and <ul>
How can I modify the code to hide jQuery and show div?
Target it directly
$(".drops").slideToggle(400);
If you need it to be context aware, something like this might work
$(this).closest(".dramer").find(".drops").slideToggle(400);
$ (this). next(. "drops"). slideToggle (400);
$(this).closest('.dramer').children('.drops').slideToggle(400);
How about trying
$ ('a.shares'). click (function (event) {
event.preventDefault ();
event.stopPropagation ();
$(this).parent(".dramer").children(".drops").slideToggle(400);
});
You should go up to the nearest ancestor that is shared between .shares and .drops, and then find .drops from there:
$(".shares").on("click", toggleDrops);
function toggleDrops (event) {
$(this).closest(".dramer").find(".drops").slideToggle(400);
return false;
}
I'm not sure I understand what you what. If you mean you want to hide the div which is a child of your , you can try this:
$ ('a.shares'). click (function (event) {
event.preventDefault ();
event.stopPropagation ();
$(".drops").slideToggle (400);
});

switching two ids with ajax callback

I was kindly helped by Jonathan over here simple javascript question-linking button state to image swap?
The problem is that this makes the "active" class the same class for both list items.
Each list item needs to toggle its own active and its own inactive class (each is a button with its own css styling and background image).
Can you please help me modify the script so that I can do that?
Here is Jonathans provided code:
<li class="transcript">
<a id="transcriptionhorbutton" class="inactive"
href="javascript:void()"
onclick="getDataReturnText('/lessons/transcriptions/ajaxcalls/L1horizontal.txt', callback);make_active(this);"></a>
</li>
<li class="transcript">
<a id="transcriptionvertbutton" class="inactive"
href="javascript:void()"
onclick="getDataReturnText('/lessons/transcriptions/ajaxcalls/L1vertical.txt', callback);make_active(this);"></a>
</li>
<script>
var buttons = [ document.getElementById("transcriptionvertbutton"),
document.getElementById("transcriptionhorbutton")];
function make_active(el) {
deactivate_buttons();
el.setAttribute("class","active");
}
function deactivate_buttons() {
buttons[0].setAttribute("class","inactive");
buttons[1].setAttribute("class","inactive");
}
</script>
I understand that the problem is here:
function make_active(el) {
deactivate_buttons();
el.setAttribute("class","active");
}
but I don't know enough to separate that into two different classes.
Just add an extra parameter to the function:
function make_active(el, classname) {
deactivate_buttons();
el.setAttribute("class",classname);
}
Then change your calls just a bit. Here is the completed code. Note I changed all calls of setAttribute to .className instead. This was just so you don't run into any trouble with IE6:
<li class="transcript">
<a id="transcriptionhorbutton" class="inactive"
href="javascript:void()"
onclick="getDataReturnText('/lessons/transcriptions/ajaxcalls/L1horizontal.txt', callback);make_active(this,'active_class_1');"></a>
</li>
<li class="transcript">
<a id="transcriptionvertbutton" class="inactive"
href="javascript:void()"
onclick="getDataReturnText('/lessons/transcriptions/ajaxcalls/L1vertical.txt', callback);make_active(this,'active_class_2');"></a>
</li>
<script>
var buttons = [ document.getElementById("transcriptionvertbutton"),
document.getElementById("transcriptionhorbutton")];
function make_active(el, classname) {
deactivate_buttons();
el.className = classname;
}
function deactivate_buttons() {
buttons[0].className = "inactive_class_1";
buttons[1].className = "inactive_class_2";
}
</script>

Categories

Resources