I'm using jQuery to get the contents of a <strong> tag. A sample of the code is:
Trip ID: <strong name="tripID">10</strong>
...
<script type="text/javascript">
...
var tripID = $('strong[name=tripID]').text();
alert(tripID);
</script>
Firefox correctly alert()s "10". Chrome, however, alert()s "101010". Has anyone come across this or does anyone have any insights?
Edit
Changing the <strong name="tripID"> to a <span class="tripID" style="font-weight:bold;"> and changing the corresponding selector in my javascript made it work as expected. I'm still interested in what caused that behavior though!
Edit 2
I'm going to chock this up to some other part of my code interfering (it's a highly ajax-driven pages). Switching the <strong> to a <span> with a style applied corrected the issue, so I guess it's a non-problem now.
This seems to work just fine. Also as Jed asked, What's the strong tag?
http://jsfiddle.net/NiceGuy4263/MjGKL/
<span name="xxx"> is not standard. Try using <span id="xxx"> instead.
Do you mean
var tripID = $('strong[name=tripID]').text();
or
var tripID = $('span[name=tripID]').text();
jQuery returns all the elements $('span[name=tripID]') and foreach compute the text, so if you have 3 $('span[name=tripID]') all with 10 in it, it will return 101010.
I would suggest to give a class, or, even better, an ID
Trip ID: <span name="tripID" id="tripID">10</span>
...
<script type="text/javascript">
...
var tripID = $('#tripID').text();
alert(tripID);
</script>
Related
I have a pretty good understanding of HTML & CSS, but I am having trouble with the Tag Page feature of tumblr. On my blog for every tagpage, I have a heading being grabbed from the name of the tag. I do not want to change the URL. I want to change the heading on the page, but that heading is being grabbed from the {tag}. The tag is vld. Instead of the page saying vld, I want it to say "All Designs". Pretty much overriding the {tag} for just the /tagged/vld tagpage. The TagPage code is:
{block:TagPage}
<div class="tagtitle">{tag}s</div>
{/block:TagPage}
For /tagged/vld, I want the heading on the page to be "All Designs" instead of "vld". how can I make this change for this specific tagpage?
I have tried
{block:TagPage}
<div class="tag" id="{Tag}">All Designs</div>
{/block:TagPage}
My code being:
{block:TagPage}
<div class="tagtitle" id="vld">All Designs</h2>
{/block:TagPage}
I have also tried
<script>
switch(window.location.pathname) {
case "/tagged/vld":
$('.tagtitle').text('All Designs');
break;
}
});
</script>
But neither of the methods have worked - everything is still showing the tag as the heading. You can see my blog at vintagelovedesigns.tumblr.com
OK, I have a test version working here using one of your themes:
https://madox-test.tumblr.com/tagged/vld
Your switch statement should be throwing an error as you have an additional closing bracket.
The script should look like this:
<script type="text/javascript">
$(document).ready(function(){ // if you are using jquery it is a good idea
// to wrap code in a document ready function
switch(window.location.pathname) {
case "/tagged/vld":
$('.tagtitle').text('All Designs');
break;
};
});
</script>
Hope this helps.
I'm having to write a scraper using nightmare. On one the links the website is using a div for the user to navigate away from the page. In order to follow the navigation flow, I would like my nightmare instance to "click" the div. However, nothing happens when I'm on chrome, and obtain the element and call click. Unlike Firefox, where this works fine.
The script
let elem = document.getElementByClassName('is-a-div-element')[0];
elem.click()
Works fine on firefox, nothing happens on chrome! Any ideas? The site causing issue is using React. Not sure if that helps or not.
The HTML structure looks like this.
<div class="nav-element">
<div class="is-a-div-element">
<div roll="button">
<span roll="presentation">Hello World</span>
<span class="Exit">Exit</span>
</div>
</div>
</div>
I'm not sure how Nightmare relates to this issue since you mention Chrome and Firefox and appear to be using standard browser Javascript, but I'll try answer anyway.
Since you've edited your question with more specific information I'll edit my answer. Now the main issue I can see is that you're using getElementByClassName, which isn't a function (missing the s).
Do this instead:
let elem = document.getElementsByClassName('is-a-div-element')[0];
Tested working in Chrome and Firefox:
window.addEventListener('load', function() {
let elem = document.getElementsByClassName('is-a-div-element')[0];
elem.click();
});
<div class="nav-element">
<div class="is-a-div-element" onclick="alert('this was clicked frens');">
<div roll="button">
<span roll="presentation">Hello World</span>
<span class="Exit">Exit</span>
</div>
</div>
</div>
I am trying to code a jquery slider. I have a html code which looks like this. I had earlier posted a simpler version of code so that the question doesnt seem too long. Sorry for the inconvenience caused. Here is the actual code
<div class="allItems">
<div class="echItm">
<h4>asdddddddd </h4>
<span class="mImg">/web/images/promotionSlideShowImages/kc1g358wvv.jpg</span>
<span class="tImg">/web/images/promotionSlideShowThumbnailsNew/kc1g358wvv.gif</span>
</div>
<div class="echItm">
<h4>dddddddddd </h4>
<span class="mImg">/web/images/promotionSlideShowImages/ptvrbfpnkd.jpg</span>
<span class="tImg">/web/images/promotionSlideShowThumbnailsNew/ptvrbfpnkd.gif</span>
</div>
</div>
When I try to do a find using
var imagesArray=$('.allItems').find('.echItm');
for(var i=0;i<imagesArray.length;i++){
var thisElement=imagesArray[i];
alert($(thisElement).html());
}
IE returns null, whereas firefox, chrome return the required html. Can someone guide me what am I doing wrong? I'm using Jquery 1.4.2 and testing this on IE8. Thanks in advance.
testElement is already a jQuery object so you don't have to wrap it in $(). Try this
var testElement=$('.echItm').find('h4');
alert(testElement.html());
Hi I have a problem(not exactly problem, I have solved it, but it is at least very interesting) with differet bahaviour of jquery selectors in IE(7-8) mobile Opera, and other browsers..
Here is my example
<div id="galleryEl"><link href="http://designclub.cz/plugins/content/plugin_jw_sig/sig.css" rel="stylesheet" type="text/css">
<style type="text/css">.sig_cont {width:30px;height:20px;}</style>
<script type="text/javascript" src="http://designclub.cz/plugins/content/plugin_jw_sig/mootools.js"></script>
<script type="text/javascript" src="http://designclub.cz/plugins/content/plugin_jw_sig/slimbox.js"></script>
<div class="sig"><div class="sig_cont"><div class="sig_thumb"><a href="http://designclub.cz/images/stories/hp/hp-falper.jpg" rel="lightbox[sig0]" title="<b>hp-falper.jpg</b>" alt="hp-falper.jpg" target="_blank"><img src="http://designclub.cz/plugins/content/plugin_jw_sig/showthumb.php?img=hp/hp-falper.jpg&width=0&height=0&quality=0">
Sorry about the formatting:)
The problem is following..When I use this selector jQuery("#galleryEl .sig_thumb a").eq(index); (index is really an integer) in major modern browsers it just works..
but in IE(7-9) (6 ia haven't tested) it doesn't..When I look into IE developer console, it looks like the result object is some kind of plain dom object???I am really not sure, not so skilled in js, but it seems so:)
When I change the jQuery(".sig_thumb a").eq(index); it selects the right dom element..The markup is so weird because of it's a joomla plugin, I am using it to dynamicaly creating background slideshows accroding to folder structure..So does anybody know wherefrom comes this weird behaviour?
And second question..I really want to make it efficient, so which kind of selector is the best one in this case?I know that when selecting over id, jQuery uses js native method, the same in case of tagName and so on, but I am really not sure how about the combinations if this selectors(whether is better to use id-tag-class-someOtherStuff, or id-class-someOtherStuff, id-someOtherStuff {in case that between id and the result object are many other DOM elements})
Thank for your help
Be sure that there is only 1 element with the ID "galleryEl" . If there are more than one, it depends on the IE-Version and the compatibility-mode if the first or the last be selected.
example for testing:
<script type="text/javascript">
jQuery(
function($)
{
alert('Found:'+jQuery("#someID .someclass").eq(1).text());
}
);
</script>
<div id="someID"><span class="someclass">1</span></div>
<div id="someID"><span class="someclass">2</span><span class="someclass">3</span></div>
I am modifying the ID of an HTML div element client side with JavaScript. The following code works OK in Internet Explorer but not in Firefox/2.0.0.20. It does work in more recent versions of Firefox.
document.getElementById('one').id = 'two';
Can anyone tell me:
Why this doesn't work in FireFox.
How to make this work in FireFox.
To clarify, I'm changing the element ID to reference a different style in an external style sheet. The style is applied in IE but not in FF.
It does work in Firefox (including 2.0.0.20). See http://jsbin.com/akili (add /edit to the url to edit):
<p id="one">One</p>
Link2
The first click changes the id to "two", the second click errors because the element with id="one" now can't be found!
Perhaps you have another element already with id="two" (FYI you can't have more than one element with the same id).
That seems to work for me:
<html>
<head><style>
#monkey {color:blue}
#ape {color:purple}
</style></head>
<body>
<span id="monkey" onclick="changeid()">
fruit
</span>
<script>
function changeid ()
{
var e = document.getElementById("monkey");
e.id = "ape";
}
</script>
</body>
</html>
The expected behaviour is to change the colour of the word "fruit".
Perhaps your document was not fully loaded when you called the routine?
You can modify the id without having to use getElementById
Example:
<div id="One" onclick="One.id = 'Two'; return false;">One</div>
You can see it here: http://jsbin.com/elikaj/1/
Tested with Mozilla Firefox 22 and Google Chrome 60.0