How to change a div using javascript and php - javascript

I've looked around a lot for this but I still can't find an answer.
I want to change a div's content by checking whether a cookie is set. The div's content varies between:
1) <img src="images/buttons/login_register.png" onmouseover="this.src='images/buttons/login_register_hover.png'" onmouseout="this.src='images/buttons/login_register.png'" alt="Login / Register"></img>
2) <img src="images/buttons/logout.png" onmouseover="this.src='images/buttons/logout_hover.png'" onmouseout="this.src='images/buttons/logout.png'" alt="Logout"></img>
Now when I do: document.getElementById("login").innerHTML = "" it doesn't work because it thinks the double quote marks used inside the HTML belong to it, is there any way that I can achieve this change? I know how to get the cookie etc, I just need to change the div, thanks for any help in advance :)

Related

Replacing text with javascript?

After much trial an error and some progress I still can't mange to change every instance of ,- with kr on my website.
I'm very much a beginner at JS and have pieced together the following code from several sources. Is the code the problem or something else?
function skrivkr() {
var skrivkr = $('div').text().replace(/\,-/g, 'kr');
$('p').html(skrivkr);
}
window.onload = skrivkr();
Update:
Thanks for the replies. The site loads jquery 1.10.7.
#Niet the Dark Absol: No, I don't want to put anything in p elements. How do I remove that part? I just want to find all ,- and simply replace with kr without changing any formatting.
Update
OK! Progress, kind of. The ENTIRE content of every <strong> and <dd> now changes to (0), instead of kr. With the odd exception of those tags including ,-. I haven't designed the site myself.
If it helps, one of the ,- appears in the following markup:
<a href="xxxx" rel="nofollow">
<span class="amount">1</span>
<span class="photo">
<img src="xxxx" alt="product name" width="62" height="42">
</span>
<span class="description">
Prtoduct name
<strong>4444,-</strong>
</span>
</a>
And the lastest script I'm applying is:
$(document).ready(function() {
$('strong, dd').html($('strong, dd').html().replace(/,-/g, 'kr'));
});
As has been mentioned innumerable times here on SO, do not try to manipulate the DOM as a string. Pain awaits.
Instead, traverse the DOM, finding text nodes, and perform whatever transformation you want to make on each text node. There are many ways to do that.
In your case, you have many problems, as mentioned already by some of the commenters and responders:
You're setting window.onload to undefined (the result of calling skrivkr), instead of to skrivkr itself.
You're extracting the text value of an element, which consists of the concatenation of all text down all levels, performing the replacement, then sticking it back in with html. This will wipe out all the element structure below.
Minor point, but there's no need to escape the comma in the regexp.
You're extracting the textual content of all div elements in the entire document, transforming it, then adding that back as the content of all p elements in the entire document. It's hard to imagine that's what you want to do.
You can update the content of each div like this
$(document).ready(function() {
$('div').each(function(){
var newText = $(this).html().replace(/,-/g, 'kr');
$(this).html(newText);
});
});
You can remove the var "newText = " and replace it with $(this).html($(this).html().replace(/,-/g, 'kr'));
The first example is easier to understand perhaps if you are new to programming.
You will, however only change the content of text placed in tags.
I would place the text to replace in a div with some predefine class, like "autoKronor", it would then look like this:
<div class="autoKronor">123,-</div>
and
$(document).ready(function() {
$('.autoKronor').each(function(){
var newText = $(this).html().replace(/,-/g, 'kr');
$(this).html(newText);
});
});
to en sure that only text you intended to change gets changed..
Example here: http://jsfiddle.net/akm1uw8h/2/
Also note the use of $(document).ready(); instead of window.onload. It does what you intended to do with window.onload.
if you really want to change EVERY single instance of ",-" to "kr" then you could do this:
$(document).ready(function() {
$('body').html($('body').html().replace(/,-/g, 'kr'));
});
But i strongly advice against the last example because it will be the slowest to compute and more importantly you might change stuff you don't intend to, like any script block inside the page body (with that i mean other javascripts)

JS know the current distance to the top of an object

I want to know, how can I get the distance that a div is from window top, by it's id attribute.
I've already tried
var pubID = "#pub_<?php echo $_GET['pub']; ?>";
alert($(pubID).scrollTop());, and this alert return me "NULL".
I want to use this, when I'am on a determinate page and click on a notification, it redirects the user to another page, and should scroll the new page to the position of the div mentioned on the notification.
Help please,
Gonçalo Ribeiro
Your best bet would be to use jQuery, because offsetTop / offsetLeft don't work consistently in all browsers.
So, assuming you've included jQuery on the page, you could use:
$('#element').offset().top
Also, if you're so inclined, have a read here on the subject here and here.
Edit
Thinking about your problem, would linking to an anchor name (i.e. Adding a hash to the URL) not be easier than trying to work out the position like this?
One link to rule them all

Quick tumblr boo-lean + Getting text function

James here. Quick, and simple question for you guys. I'm working with a tumblr theme which uses a text option, which means the user can type whatever they want, and it'll display on the blog. The text options however do not work with javascript, so I can't use the text option for amount of columns and the text option for spacing between posts in my script that organizes the whole page. I know there is a way, but I don't know how to do this, to just create an invisible div with the boo lean text in it, and then use jQuery to get the text inside the div to use as a variable? I was thinking like .text(); or .html(); but I have no clue. Any codes or help would be greatly appreciated. I'm new at this jquery thing, so it'd mean a lot.
EDIT: If this is confusing for anyone, I basically need to use jQuery to get text inside an invisible element and use that text as a variable.
I'm not sure what you mean by 'boolean' here, but per your edit you want:
$('#id-of-element').text()
if you only want the text in the div or,
$('#id-of-element').html()
if you want the HTML. So if the div contains:
<h1>foo</h1>,
text() will give you "foo", while html() will give you "<h1>foo</h1>".

Regex using js to strip js from html

I'm using jQuery to sort a column of emails, though they are base64 encoded in js... so I need a regex command to ignore the <script>.*?<script> tags and only sort what is after them (within the <noscript> tags).
Column HTML
<td>
<script type="text/javascript">
document.write(Base64.decode('PG5vYnI+PGEgaHJlZj0ibWFpbHRvOmJpY2VAdWNzYy5lZHUiIHRpdGxlPSJiaWNlQHVjc2MuZWR1Ij5iaWNlPC9hPjwvbm9icj48YnIgLz4K'));
</script>
<noscript>username</noscript>
</td>
Regex that needs some love
a.replace(/<script.*?<\/script>(.*?)/i,"$1");
Assuming that the structure of the html doesn't change, you can use this:
$(a)​.contents().filter(function(){
return this.nodeType === 3
}).eq(1).text();
It gets all text nodes and then filters to the one at index 1 and get's it's text value.
And if you want to stick with regexp, here's one:
a.replace(/(<script type="text\/javascript">[^>]+>|<noscript>.*<\/noscript>)/ig,"");
I know this isn't exactly what you're asking for (though I'm a little confused what you're asking for, to be honest...), but have you looked at using document.getElementsByTagName('noscript')? This function should return an array, the first element of which will be your noscript element.
Also, I'm not really clear on your overall approach to this problem, but it seems like you're misunderstanding the purpose of a noscript element. noscript elements only execute when the browser does not support Javascript, which means the only time noscript content would be displayed to the user is when the Javascript that you're using to modify the noscript content wouldn't run.
Perhaps you could clarify what exactly you're trying to do?

jQuery's load() doesn't display images

Good evening everyone,
I am using a JavaScript to load/override content from an HTML-File into specified divs.
You can watch a demo.
The javascript that does the load job looks like the following:
function loadScreenie(elementSelector, sourceURL) {
$(""+elementSelector+"").load("img/screenies/"+sourceURL+"");
}
and gets invoked by a hyperlink looking like this:
mibmib
( i have also tried the same with onclick="")
This is the content of screenie2.htm
hello world<br />
<img src="screenie2.png" />
The problem is that images are not displayed. The behaviour is like this:
- you click the link and the javascript is executed.
- the text in screenie2.htm is displayed correctly in the correct div
- the image is not displayed. there also isnt any broken image symbol or an empty space.
Do you have an idea what could cause this error?
Thanks a lot in advance,
-- benny
Ok. Let me conclude to you what is happening here.
When link is clicked, jQuery loads "img/screenies/screenie2.htm
The image-tag <img src="screenie2.png" /> is inserted into the DOM.
So, we have an image linking to a supposed image at ./screenie2.png, where you would believe it should be linking to *./**img/screenies/**screenie2.png*.
You need to use absolute URLs in your load():ed content.
If you're testing with IE, the problem might be that Jquery uses innerHTML instead of creating individual dom elements with the load command. IE can be very finicky about that.

Categories