I has this Html Code below
<div class="first-div">
<ul>
<li>PHP</li>
<li>CSS</li>
<li>HTML</li>
</ul>
</div>
<div class="second-div"></div>
i want when mouseover on PHP,CSS and HTML Link:
Create The Javascript REGEX to get only (php,css,html) without # sign from href in first-div.
then add (php,css,html) as ID to second-div.
You don't need a regex, the part after the # is a hash, and is available directly.
$('a').on('mouseover', function(e) {
e.preventDefault();
$('.second-div').prop('id', this.hash.substr(1));
});
Not sure why you would ever set the ID dynamically, but whatever floats your goat !
Related
I've got a website under prestashop, and my dropdown menu has different categories that are all clickable. I would like to remove the links from the "Marques" and "Les Gammes" categories and leave just the text. I'm using the each() function to select all my categories, but this returns an array within the li and the ul inside the li.
Here is the JSFiddle.
Here is the js code:
$('jms-mega-menu').ready(function () {
// Get each div
$('.notlink').each(function () {
// Get the content
var str = $(this).text();
$(this).html(str);
});
});
And here is a sample of my html code. You can find the full code on the fiddle.
<ul jms-mega-menu>
<div>
...
<ul class="mega-nav level1">
<li class=" haschild group notlink"><a id="item-8" href="#">Marques</a>
<ul>
<li><a id="item-9" href="#">Apple</a></li>
<li><a id="item-10" href="#">Samsung</a></li>
</ul>
</li>
</ul>
<ul>
...
One solution would be use unwrap to remove the a tag from around the text. Note the use of .notlink > a to only affect anchors that are direct children of the .notlink and not the nested lists:
$('.notlink > a').contents().unwrap();
http://jsfiddle.net/orvrj7qs/5/
Another option which may be a bit more extensible would be to use replaceWith, which would allow you to make additional modifications to the text if needed:
$('.notlink > a').replaceWith(function(){
return $(this).text();
});
In this case, we simply replace the anchor with just the text within the anchor.
http://jsfiddle.net/orvrj7qs/6/
HTML code looks like:
<ul>
<li class="result">
<h3 class="title"><a class="someclass" href="url">Sometext</h3>
<cite class="url">Cite URL-1</cite>
</li>
<li class="result">
<h3 class="title"><a class="someclass" href="url-1">Some more text</h3>
<cite class="url">Cite URL-2</cite>
</li>
</ul>
I have to get cite value(cite URL) on click of a href.
Something like:
$('a[class="someclass"]').mousedown(function() {
console.log($('cite').text()) //if first link clicked then Cite URL-1 should get returned
}
How to get cite tag value in this case?
I'd suggest:
$('.someclass').click(function(e){
e.preventDefault(); // prevent the click from reloading the page or navigating
var cite = $(this).closest('li').find('cite');
console.log(cite.text());
});
References:
click().
closest().
find().
text().
You're looking for jQuery's .click() event.
Try this:
$('a[class="someclass"]').click(function() {
var text = $(this).parents('.result').find('cite').html();
}
You need to get the immediate next cite element to the hyperlink(to get its text) first. Something like console.log($(this).parent().next()[0].innerHTML)
I've put together a very simple tabbed browser which you can see here
http://jsfiddle.net/zandergrin/sN2Eu/
I'm just wondering if there was a way to smarten up the script so that all the numbering is handled automatically - ie I can add a new tab and wouldn't need to add new javascript.
I know I can do it with jquery ui, but a) I'm trying to lkeep it super lightweight and, more importantly, b) I'm trying to learn!!
Thanks - I'm pretty basic on my javascript so any explanations would be greatly appreciated
You need to add a comman class to each tab so you can select all of them and a unique id that is also the value in the href of the links.
Also add a common class to all the links..
<div class="tab-nav">
<ul>
<li>Overview</li>
<li>Specs</li>
<li>More Info</li>
</ul>
</div>
<div id="tab1" class="tab">
<p>content1</p>
</div>
<div id="tab2" class="tab" style="display: none">
<p>content2</p>
</div>
<div id="tab3" class="tab" style="display: none">
<p>content3</p>
</div>
and your javascript now can be
function tabActions(e) {
// e.preventDefault(); // stop default browser action of link will not add the hash to the url
var targetId = $(this).attr('href'); // extract the value in the href (the #tab1 for example)
$('.tabclick').removeClass('active'); // remove the active class from all links (find them by their common class)
$(this).addClass('active'); // add it to the currently clicked link
$('.tab').hide(); // find all tabs (by the common class) and hide them
$(targetId).show(); // show the current tab
};
$('.tabclick')
.click(tabActions) // bind handler
.filter(function(){ // find the link that points to the hash in the url
return this.hash == window.location.hash;
})
.click(); // manually trigger click on it
Demo at http://jsfiddle.net/gaby/sN2Eu/3/
I have the following dropdown menu how can i redirect each menu to corresponding page by clicking each of menu? is it possible by using one javascript function if yes how?
thanks in advance...
<div>
<ul>
<li id=home onclick="show(this.id)">Home</li>
<li id=collection onclick="show(this.id)>Collection</li>
<ul>
<li id=men onclick="show(this.id)>Men</li>
<li id=women onclick="show(this.id)>Women</li>
</ul>
<li id=contact onclick="show(this.id)>Contact</li>
</ul>
</div>
Yes you can.
Use window.open("URL") in your case URL is this.id
Also you can update window.location
read more here http://www.tizag.com/javascriptT/javascriptredirect.php
Like Niko said you need closing quotes
.. onclick="window.open(this.id)" ..
If you only need o JS function to redirect based on a parameter that, in your case, is the component ID, this will do the work:
<script type="text/javascript">
var show = function(id) {
window.location.href = id + '.jsp';
};
</script>
If you want to navigate DOM and get link's href attribute use:
document.getElementById(id).firstChild.href
Considering that the first element inside the component referred by ID is a link tag.
Try this?
$("div > ul li a").click(function() {
window.location.href += "/" + $(this).parent()[0].id;
});
I tried to use a selector that didn't modify your HTML, so that's why it looks so icky.
This makes no sense.
I understand that your particular functional requirement is to invoke the link when the enduser clicks somewhere in the space of the <li> outside the link. To achieve that just set the CSS display property of the <a> element to block. This way the link will span the entire space of its parent element.
<ul id="menu">
<li>Home</li>
<li>Collection</li>
<ul>
<li>Men</li>
<li>Women</li>
</ul>
<li>Contact</li>
</ul>
with this CSS
#menu li a {
display: block;
}
No need for ugly JavaScript hacks. Opening a new JSP page location in the current window is by the way to performed by window.location = 'some.jsp';. But this is not necessary if you use the right solution for the concrete problem. In the future questions, try to elaborate more about the functional requirement instead of concentrating only on the solution of which you thought that it's the right solution for the particular functional requirement.
I need to replace the dash in a title on by site with a span tag and line break to break to title over two lines.
Unfortunately I don't have access to do this in the PHP :(
The below statement seems to do this. Although with bugs as it's making this change to the character throughout the page.
document.body.innerHTML = document.body.innerHTML.replace(/\u2013/g, "</span><br /><span>");
The jQuery solution I tried below, works but sometimes the element would have a visibility hidden on the element!
$("#events h3 a").each(function() {
$(this).html($(this).html().replace(/\u2013/g,"</span><br /><span>"));
});
Ideally I would like to use the pure JavaScript version above but need help navigating to the Events Link.
#events h3 a
Thanks anybody who can help, I have hunted for a solution everywhere.
This is an example of the page structure. And explains why the span close and start are back to front in the code excerpt. This is so each half can be styled when on separate lines.
<ul id="events">
<li>
<h3>
<a href="http://example.com">
<span>First Events Title - On Every Sunday</span>
</a>
</h3>
</li>
<li>
<h3>
<a href="http://example.com">
<span>Second Events Title - On Every Monday</span>
</a>
</h3>
</li>
</ul>
It seems so simple, is this a trick question? If it as simple as i thought try this.
$(function () {
$("#events h3 a").each(function () {
$(this).html($(this).html().split(" - ").join("</span><br/><span>"));
});
});
document.getElementById('events').innerHTML
I am not sure why you do the special encoding in your regex (maybe something I am missing). Anyway, this works
$("#events h3 a span").each(function() {
$(this).html($(this).html().replace("-","</span><br /><span>"));
});
Here's a JavaScript way to do it
jsfiddle
var replaceDashes = function() {
var body = document.getElementsByTagName('body')[0];
// copied an – character to use in the replace
body.innerHTML = body.innerHTML.replace(/ – /g, '</span><br /><span>');
};
replaceDashes();
Try using u002d instead of u2013.
$("#events h3 a").each(function() {
$(this)
.html($(this)
.html()
.replace(/\u002d/g, "<span /><br /><span>"));
});
updated JavaScript code
Update
Interestingly u002d refers to ASCII hyphen and u2013 refers to the en dash. It appears "-" is seen as the ASCII hyphen, and not as the en dash. Honestly, it's quite confusing since they look alike :-S.
Here's a web page for the special characters for commonly confused with, like hyphen and en dash.
So, I've updated the code, replacing "-" with "& # x2013" [SO sanitizes my entry :)] in the html and it will work as you expected.
<ul id="events">
<li>
<h3>
<a href="http://example.com">
<span>First Events Title – On Every Sunday</span>
</a>
</h3>
</li>
<li>
<h3>
<a href="http://example.com">
<span>Second Events Title – On Every Monday</span>
</a>
</h3>
</li>
</ul>
Unicode version
Alternately, you may use "& ndash ;" [Again, SO sanitizes my entry] instead of the Unicode form
<ul id="events">
<li>
<h3>
<a href="http://example.com">
<span>First Events Title – On Every Sunday</span>
</a>
</h3>
</li>
<li>
<h3>
<a href="http://example.com">
<span>Second Events Title – On Every Monday</span>
</a>
</h3>
</li>
</ul>
ndash'ed version