As far as I know, I'm following the correct usage form on: http://api.jquery.com/multiple-attribute-selector/, but for whatever reason I'm not seeing, my code is not working. Each attribute works fine independently of one another (i.e.
$(".tonight_stat_peopleThumbs li[srcid="+srcid+"]") works and $(".tonight_stat_peopleThumbs li[style*=inline-block]") works) but they do not work together.
Here is my function in the JavaScript:
hidePatrons = function(srcid) {
$(".tonight_stat_peopleThumbs li[srcid="+srcid+"][style*=inline-block]").each(function(){
$(this).css({"display" : "none"});
});
}
Here is a piece from the HTML:
<ul activepage="1" class="tonight_stat_peopleThumbs" style="width:171px">
<li id="myid" class="myclass" ptype="people" ptime="11101101" style="display:inline-block;">
<a href="http://domain.com/users/#.php">
<img src="https://graph.facebook.com/#/picture" />
</a>
</li>
</ul>
NOTE: The '#' are inserted for privacy, assume they are fbid numbers.
Note that while CSS allows attribute selectors without quotes, there are quotes in every jQuery example. My experience has been that jQuery does not select reliably without quotes.
/* Good for CSS, bad for jQuery */
[foo=bar]
/* Good for both */
[foo="bar"]
Try
$('.tonight_stat_peopleThumbs li[srcid="' + srcid + '"][style*="inline-block"]')
mind the quoting!
try changing li[srcid="+srcid+"] to li[id="+srcid+"] I don't see a "srcid" attribute so I assume you are looking to search on the "id" attribute
can you please try like this way? the following is working fine for me for your HTML code.
hidePatrons = function(srcid) {
$("#tonight_stat_peopleThumbs li[ptype=people][style*=inline-block]").each(function(){
$(this).css({"display" : "none"});
});
}
note: # is for id, and . is for class. I changed . to # and srcid="+srcid+" to ptype=people from your code.
Related
I gave my link a an id where if I click the link, I want my javascript to adjust the background image. I made a js-fiddle of a simple version of what I want here:
https://jsfiddle.net/qp8d390b/
<body background="http://www.blueskiescareers.co.uk/wp-content/uploads/2014/05/blue-sky-clouds.jpg">
<li>
<a id = "attempt1" href="#top">SNOOPY1</a>
</li>
<li>
<a>SNOOPY2</a>
</li>
<li>
<a>SNOOPY2</a>
</li>
<div id= "#top">TOP PART </div>
</body>
$(document).ready(function() {
$("a[id='attempt1']").click(function(e) {
e.preventDefault();
alert('works');
document.body.background = "https://upload.wikimedia.org/wikipedia/commons/0/02/Fried_egg,_sunny_side_up.jpg";
});
});
I'm new to selecting with javascript. Any help would be appreciated!
try to use $("#attempt1")
use # to get any id in html
Firstly your HTML is invalid; li must be in either a ul or ol and all a elements must have either a name or href attribute.
Secondly, jQuery uses CSS rules, so to select by id is $('#attempt1').
Lastly, to change the background CSS property to an image the URL string should be wrapped in url(). Try this:
$(document).ready(function() {
$("#attempt1").click(function(e) {
e.preventDefault();
$('body').css('background', 'url("https://upload.wikimedia.org/wikipedia/commons/0/02/Fried_egg,_sunny_side_up.jpg")');
});
});
You can select it with :
$('#attempt1')
You should use id-selector in this case
https://api.jquery.com/id-selector/
$("#attempt1")
The selector you used which is attribute selector is more used in inputs than in links (a elements)
https://api.jquery.com/attribute-equals-selector/
You can find more info on jQuery selectors in
https://api.jquery.com/category/selectors/
Hope it helps
Question: So let's say I have some basic code
<a name = "sec">this is a test</a>
I want a javascript function to on click of a link to change that to
So user clicks:
link!
And the JS kicks in to change the 1st html to:
<font color = "green"><a name = "sec">this is a test</a></font>
Is it possible to do this in JS?
You can set the element's color with JS as a simple solution. You should also give the element a valid href attribute that nullifies the default click behavior.
<a name="sec" href="javascript:void(0);" onclick="this.style.color='green';">
this is a test
</a>
Try something along the lines of
link
And you should not use <font> tag for setting text attributes, this is considered bad practice in today’s HTML (be it XHTML or HTML5).
Something like this should work: (Psudeo Code)
<a id="sec" onClick="makeGreen()">this is a test</a>
<script type="text/javascript" charset="utf-8">
function makeGreen() {
document.getElementById('sec').style.color('green');
};
</script>
Realistically, you should keep your semantics and your style separate. As other users have suggested, use a css class instead of modifying styles directly. This is fairly easy to do, as shown by this jsFiddle
This is a test
<script type="text/javascript">
var el = document.getElementById('my-link');
el.addEventListener('click', function() {
this.className = 'clicked-class';
});
</script>
And of course in your CSS you would define some sort of rule:
.clicked-class {
color: green;
}
This could be made even simpler with a javascript library of your choice, but hopefully should be enough to get you started.
$(element).on("click",function() {$(this).css({'color', 'blue'});
I have a link that looks like this:
<p class="half_text"><?php echo $upvotes; ?> <strong>
<a id="vote_up" style="color: #295B7B; font-weight:bold;" href="">Vote Up</a>
</strong> | <?php echo $downvotes; ?> <strong>
<a id="vote_down" style="color: #295B7B; font-weight:bold;" href="">Vote Down</a>
</strong></p>
and some jQuery code that I am trying to get called.
<script type="text/javascript">
$('#vote_up').click(function()
{
alert("up");
});
</script>
But for some reason the alert does not fire when the vote up or down links are pressed. Any idea what I am doing wrong?
You can see this for yourself here: http://www.problemio.com
You need to place your code inside the .ready() handler:
$(document).ready(function() {
$('#vote_up').click(function()
{
alert("up");
//Return false to prevent page navigation
return false;
});
});
Take a look at the .ready() docs: http://api.jquery.com/ready/
Here's a working jsFiddle.
Wrap your code in a .ready() handler. The shortcut is $(function(){...}):
$(function(){
$('#vote_up').click(function() {
alert("up");
});
})
is equivalent to $(document).ready(function(){....}).
Not sure if it's necessary but try putting a # in the href attribute.
Also, you are using id attributes for your links when there are more than one of each on the page, you should use class instead.
The id attribute is supposed to be unique across a document. If you want it to apply to multiple elements, consider using a class instead.
Not sure if this is causing your problem but you have duplicate ids on your page.
Try changing 'vote_up' and 'vote_down' to classes.
Below is my current code. And it is working fine, but I need the .code class element to display as plain text and not render as HTML.
jQuery:
$(document).ready(function( ) {
$('.code').hide();
$('.codeLink').toggle(
function() {
$(this).next('.code').fadeIn();
$(this).addClass('close');
},
function() {
$(this).next('.code').fadeOut();
$(this).removeClass('close');
}
); // end toggle
});
HTML:
<a class="codeLink" style="margin-bottom: 10px; display: block;" href="#">Get The Code</a>
<div class="code"><a class="benefitsQandA" href="#">Get an Instant Quote & Apply</a></div>
This section of the .code class should display on the screen exactly like this (in other words not rendered as HTML just as text):
<a class="benefitsQandA" href="#">Get an Instant Quote & Apply</a>
try this:
$(".code").text($(".code").html());
of course, if you are doing that to multiple divs, you would need to use .each:
$(".code").each(function(){
$(this).text($(this).html());
});
Use $(".code").text($(".code").html())
The proper way to handle this is to escape the code you don't want the browser to render, like this:
<a class="codeLink" style="margin-bottom: 10px; display: block;" href="#">Get The Code</a>
<div class="code"><a class="benefitsQandA" href="#">Get an Instant Quote & Apply</a></div>
If you don't then you aren't guaranteed the correct output from the browser since JQuery's .html() tag is a wrapper for .innerHTML (See http://api.jquery.com/html/) which doesn't always return the exact same markup that you use.
You can take a look at a tool like the one at http://accessify.com/tools-and-wizards/developer-tools/quick-escape/ to do the escaping for you.
Wikipedia also has a reference of XML/HTML entity codes
Could you not do this from the server?
When the user hits the toggle button pass the html to the server, using php replace the < and > characters with < and > and return the html back to the page.
unless you are dealing with a very large amount of data this shouldn't take long to process. and this way you will get 100% exactly what the original markup is.
I have a string in JavaScript and it includes an a tag with an href. I want to remove all links and the text. I know how to just remove the link and leave the inner text but I want to remove the link completely.
For example:
var s = "check this out <a href='http://www.google.com'>Click me</a>. cool, huh?";
I would like to use a regex so I'm left with:
s = "check this out. cool, huh?";
This will strip out everything between <a and /a>:
mystr = "check this out <a href='http://www.google.com'>Click me</a>. cool, huh?";
alert(mystr.replace(/<a\b[^>]*>(.*?)<\/a>/i,""));
It's not really foolproof, but maybe it'll do the trick for your purpose...
Just to clarify, in order to strip link tags and leave everything between them untouched, it is a two step process - remove the opening tag, then remove the closing tag.
txt.replace(/<a\b[^>]*>/i,"").replace(/<\/a>/i, "");
Working sample:
<script>
function stripLink(txt) {
return txt.replace(/<a\b[^>]*>/i,"").replace(/<\/a>/i, "");
}
</script>
<p id="strip">
<a href="#">
<em>Here's the text!</em>
</a>
</p>
<p>
<input value="Strip" type="button" onclick="alert(stripLink(document.getElementById('strip').innerHTML))">
</p>
Regexes are fundamentally bad at parsing HTML (see Can you provide some examples of why it is hard to parse XML and HTML with a regex? for why). What you need is an HTML parser. See Can you provide an example of parsing HTML with your favorite parser? for examples using a variety of parsers.
If you only want to remove <a> elements, the following should work well:
s.replace(/<a [^>]+>[^<]*<\/a>/, '');
This should work for the example you gave, but it won't work for nested tags, for example it wouldn't work with this HTML:
<em>Google</em>
Just commented about John Resig's HTML parser. Maybe it helps on your problem.
Examples above do not remove all occurrences. Here is my solution:
str.replace(/<a\b[^>]*>/gm, '').replace(/<\/a>/gm, '')