I have some jquery,
$( document ).ready(function() {
body=$(body).html;
$("html").html(body);
});
Which should replace the document with it's body. But it doesn't work!
Despite I don't understand what you are trying to achieve, there are some errors in your code:
$(document).ready(function() {
var body = $('body').html();
$("html").html(body);
});
.html() is a function so the () is needed
body is an html-tag so you need the ' or " around the tag
Related
I learned that you can update a content inside div by using jQuery. I want to improve this code as the content is being change after it loads. I want it to be permanent regardless if it's loading or not.
Here's my code.
function changeContent () {
var myelement = document.getElementById("topbarlogin");
myelement.innerHTML= "HELLO";
}
window.onload = changeContent ;
This is my html code
<div class="signuplink" id="topbarlogin">Login</div>
Either call your function at the end of your body tag without window.load in script tag...
It will execute function() faster than the window.load
Stack Snippet
<body>
<div class="signuplink" id="topbarlogin">Login</div>
<script>
function changeContent() {
var myelement = document.getElementById("topbarlogin");
myelement.innerHTML = "HELLO";
}
changeContent();
</script>
</body>
...Or you can use DOMContentLoaded EventListener...it is equivalent to the $(document).ready() jQuery
function changeContent() {
var myelement = document.getElementById("topbarlogin");
myelement.innerHTML = "HELLO";
}
document.addEventListener("DOMContentLoaded", function(event) {
changeContent();
});
<div class="signuplink" id="topbarlogin">Login</div>
On DOM Ready use .html() to set HTML of div.
// This is you DOM Ready
$(function(){
// Set HTML using jQuery
$("#topbarlogin").html("HELLO");
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="signuplink" id="topbarlogin">Login</div>
Please try this
$("#topbarlogin").html("Hello");
Why am I getting an error when I run a jquery as a Custom javasript variable? The error description is "Error at line 10, character 2: Parse error. ')' expected"
function(){
$( document ).ready(function() {
$('button[class="panel__link panel__link--btb"]').on( 'click', function(e) {
var $label = $( this ).parent().find("h2").text();
return $label;
});
});
};
Please advise.
Regards,
Sree
Remove the last semicolon ; on the last line:
function(){
$( document ).ready(function() {
$('button[class="panel__link panel__link--btb"]').on( 'click', function(e) {
var $label = $( this ).parent().find("h2").text();
return $label;
});
});
}
I think you did some conceptual mistake, when you working with GTM. Custom variable should return some value when trigger is fired.
I think your initial goal in GTM is:
Send some tag (to Universal analytics or something else) when user clicks on button button[class="panel__link panel__link--btb"]. This tag should contain some text information, which you can find like that .parent().find("h2").text();
If i am correct, then you should do the following:
Go to Variables. Built-in variables-> Configure-> Enable Click Element
Go to Triggers -> New -> Type: All Elements -> Click Element:matches CSS selector:button.panel__link.panel__link--btb
Go to Variables. New -> Custom JavaScript: function(){return {{Click Element}}.parent().find("h2").text();} -> Name: 'H2 text'
Go to Tags. New -> Assign trigger from step #2. -> Type: (you can choose what you need) -> And here you can use your variable {{H2 text}}, it will return necessary text
The error is caused because there no name for the function. I think you are trying to do a Self Invoking function which should be
(function(){
//your code
}());
Your code should be,
(function(){
$( document ).ready(function() {
$('button[class="panel__link panel__link--btb"]').on( 'click', function(e) {
var $label = $( this ).parent().find("h2").text();
return $label;
});
});
}());
Or
Remove the function() {} and simply execute the code with .ready
$( document ).ready(function() {
$('button[class="panel__link panel__link--btb"]').on( 'click', function(e) {
var $label = $( this ).parent().find("h2").text();
return $label;
});
});
I'm trying to modify an iframe/object content adding a script into it. At the moment, I have something like this:
// "script" is a node with an self-called function as its content
$(function() {
$('object, iframe').each(function() {
this.addEventListener('load', function() {
this.contentDocument.getElementsByTagName('head')[0].appendChild(script.cloneNode(true));
});
});
});
And it works as expected (the script does its job and it is added to the DOM of the iframe) but the problem comes when I try to do it the "jQuery" way:
// "script" is a node with an self-called function as its content
$(function() {
$('object, iframe').each(function() {
$(this).on('load', function() {
this.contentDocument.getElementsByTagName('head')[0].appendChild(script.cloneNode(true));
});
});
});
In the previous code, the script won't be added to the dom of the iframe.
Is there any reason why the .on('load') version is not working? What can be wrong? Am I missing something?
PS: The iframe is same-origin.
In each case, the inner function's this might not always be what you want it to be. I'd try:
$(function() {
$('object, iframe').each(function () {
$(this).on('load', function (event) {
event.target.contentDocument.getElementsByTagName('head')[0].appendChild(script.cloneNode(true));
});
});
});
Cf. https://api.jquery.com/event.target/
I have this in my HTML Body:
<p>loaded y&EACUTE;t.</p>
With JavaScript I have this:
$( document ).ready(function() {
document.body.innerHTML = document.body.innerHTML.replace('ACUTE', 'acute');});
the result shown in the browser:
loaded yÉt
but the expected result:
loaded yÉt
Any idea how to properly replace the code and display accents with javascript?
Replace &EACUTE; with É
$( document ).ready(function() {
document.body.innerHTML = document.body.innerHTML.replace('&EACUTE;', 'É');
alert(document.body.innerHTML.replace('&EACUTE;', 'É'));
});
I am trying to remove a string at the end of my img src for all my img elements on the page.
An example of an img src as it appears now
http://www.example.com/B-UV-image-copy.jpg?resize=320%2C180
How I want it to be
http://www.example.com/B-UV-image-copy.jpg
I am trying to use javascript in the footer to find all img elements then remove ?resize=320%2C180 from all of them. The string "?resize=320%2C180" is always the same on all the images I want to effect.
Currently my code looks like this:
<script>
$('img').attr('src', function(index, attr) {
return attr.replace("?resize=320%2C180", "");
});
</script>
I appreciate I may be going about this all wrong. Currently the above script does nothing but I get an error in firebug:
Uncaught TypeError: undefined is not a function
Any help would be appriciated.
Your code works. You just need the DOM to be loaded and you need to make sure $ is tied to jQuery.
<script>
(function ($) {
$(document).ready(function() {
$('img').attr('src', function(index, attr) {
return attr.replace("?resize=320%2C180", "");
});
});
}(window.jQuery));
</script>
Works for me. You just need to ensure that the DOM is ready before you ask jQuery it to manipulate it:
$(function(){
$('img').attr('src', function(index, attr) {
return attr.replace("?resize=320%2C180", "");
});
});
http://jsfiddle.net/os5rhw23/
Using RegExp to strip off all the query part from a URL:
jQuery(function ($) {
$('img').attr('src', function(index, attr) {
return attr.replace(/\?.*$/i, '');
});
});
The other two answers are correct, but the nicest shorthand for a DOM ready handler and a locally scoped $ for jQuery is jQuery(function ($) { your code here}:
e.g.
<script>
jQuery(function ($) {
$('img').attr('src', function(index, attr) {
return attr.replace("?resize=320%2C180", "");
});
});
</script>
If you want to do this with pure JS, inline in the footer without the need for jQuery you can simply loop through all images - so long as this script in on the page at some point after the images (eg just before the close body)
<body>
<!-- some html, blah blah -->
<script>
var images = document.images,
i = images.length;
while(i--) {
var image = images[i];
image.src = image.src.replace("?resize=320%2C180", "");
}
<script>
</body>
http://jsfiddle.net/os5rhw23/1/