For learning reasons, I build my own link shortener and yeah...
After 5 Seconds this code
<div class="skip-container">
<p class="five">SKIP IN 5 SECONDS</p>
</div>
should be replaced with
<div class="skip-button">
SKIP THIS AD
<div class="skip-arrow"></div>
</div>
to do that I tried
$( document ).ready(function test() {
setTimeout(function test() {
$("p.five").replaceWith('<div class="skip-button">
SKIP THIS AD
<div class="skip-arrow"></div> </div> ');
}, 5000);
});
It changed the script, but it looks broken and not like how it should... I read something about it keeps it in DOM and such stuff, but I am new in all that and yeah... https://viid.su/bBwgN is the problem page!
You either need to concatenate the string down, or escape the new lines:
$(function() {
setTimeout(function() {
$("p.five").replaceWith('<div class="skip-button">\
SKIP THIS AD\
<div class="skip-arrow"></div>\
</div> ');
}, 5000);
});
Related
Although there are some questions similar, ive read it and cant solve my problem.
Hope someone direct some light on this in order to help not only me but others out there.
I have added JS file to my child theme (wordpress) via functions.php and then added Event listener to ID.
The problem inhabits on the :Uncaught TypeError: Cannot read property 'addEventListener' of null
at custom.js?ver=5.4:1
Although when i click the object it goes correctly to the link, the error shows on console.
on functions.php ive added:
function my_customm_scripts() {
wp_enqueue_script( 'custom-js', get_stylesheet_directory_uri() . '/custom.js', array( 'jquery' ),'',true );
}
add_action( 'wp_enqueue_scripts', 'my_customm_scripts' );
and in my custom.js ive added:
document.getElementById('hercule').addEventListener('click', function() {
location.href = 'https://somedomain.com'
}, false);
im shure its straightforward but ive checked so many solutions without success
Thx for your time
J.
<div class="hoverfora wpb_animate_when_almost_visible wpb_slideInUp slideInUp wpb_column vc_column_container vc_col-sm-4 wpb_start_animation animated" id="hercule">
<div class="vc_column-inner vc_custom_1587337223984">
<div class="wpb_wrapper">
<div class="service_table_holder">
<ul class="service_table_inner">
<li class="service_table_title_holder background_color_type" style="">
<div class="service_table_title_inner">
<div class="service_table_title_inner2">
<h3 class="service_title" style="">Web design</h3>
<i class="qode_icon_font_awesome fa fa-desktop fa-3x" style="color: #efcd21 !important;"></i>
</div>
</div>
</li>
<li class="service_table_content" style="">Development de websites .
<p></p>
</li>
</ul>
</div>
</div>
</div>
</div>
I think that is
window.location.href = 'https://somedomain.com'
Try this instead,
If you are sure that your html source contains the element with id="hercule". Then you can try
window.onload = function () {
document.getElementById('hercule').addEventListener('click', function() {
location.href = 'https://somedomain.com'
// alert("clicked div");
}, false);
};
Make sure that all your onload processes are written in a single place. Otherwise the browser will keep and execute only last found window.onload function.
This code of yours:
document.getElementById('hercule')
is looking for a DOM element with id="hercule". Apparently, your page does not contain such an element at the time the custom.js is being run, so document.getElementById('hercule') is returning null, then a TypeError is thrown when addEventListener method is called on a null object.
Look for an element on your HTML page that contains id="hercule". If you can't find it, your problem has been identified.
Edit:
Subsequent information reveals that the custom.js JavaScript is trying to access a div with id="hercule" before it exists. The solution is to delay the start of the custom function until the div exists.
Normally, waiting for the window's load event is sufficient, but it is unclear in this case that will work, as "hercule" may be generated by another JavaScript function that won't complete by the time of the load event.
One solution is simply to continue to look for "hercule" until it's found:
// USE THIS SECTION IN YOUR CODE:
// keep looking for "hercule"
function lookForHercule() {
const hercule = document.getElementById('hercule');
if (hercule) {
// add the 'click' listener to 'hercule'
hercule.addEventListener('click', function() {
hercule.innerHTML = "You clicked hercule, redirecting to somedomain.com";
location.href = 'https://somedomain.com'
}, false);
return;
}
console.log('"hercule" not found');
setTimeout(lookForHercule, 2000);
}
// start looking
lookForHercule();
// END OF SECTION TO USE IN YOUR CODE
// THE CODE BELOW IS FOR THIS DEMO ONLY, DO NOT USE IN YOUR CODE:
// FOR DEMO ONLY:
// add 'hercule' after 10 seconds to simulate delay
setTimeout(() => {
const wrapper = document.getElementById('wrapper');
const hercule = document.createElement('div');
hercule.id = 'hercule';
hercule.innerHTML = "I am hercule. Clicking me will redirect to somedomain.com";
wrapper.appendChild(hercule);
}, 10000);
/* this will change cursor to finger when hovering over hercule */
#hercule:hover {
cursor: pointer;
}
<div id="wrapper">
<h4>Search for 'hercule'</h4>
</div>
I have an HTML page that lays out div components and every div component call a function and pass this as an object. The div looks like this:
<div id="pull-requests-view">
<div class="green-header">This is the 1st title</div>
# this is the div that will flash on double click
<div class="green" ondblclick="flashAndMessage(this)" onclick="unblink(this)" id="tile0">
<img class="profile-photo" src="someImageURL">
<div class="pill-green">
<a class="hypLink" href="UNIQUE_LINK_FOR_EACH_DIV" target="_blank">tag information</a>
</div>
</div>
</div>
What's really happening here is that there are multiple divs like that with different id. When I click double click on the div its calls the flashAndMessage() with argument this which results in my div to blink and flash using JQuery fadeIn() and fadeOut().
Details aside, the actual problem is that I have polling implemented that re-renders the HTML including all the divs. So basically the flashing and blinking is lost once the page updates.
I have tried global variables that store the this object before the page reloads and tries to pass the variables to jQuery find() function so that flashAndMessage() could be re-applied.
However it is not working for me. Here are my functions:
function unblink(selector) {
$(selector).stop()
$(selector).fadeIn({opacity: 1})
}
function blink(selector) {
$(selector).fadeOut('slow', function () {
$(this).fadeIn('slow', function () {
blink(this);
});
});
}
function flashAndMessage(selector) {
var pullReqURL = $(selector).find('.hypLink').attr('href')
blinkList.push(selector) # this is where the `div` is stored before the page reloads
blink(selector)
}
Note: The blinkList is a global array that is defined on top of everything else. I have a loop that runs after the divs are reloaded and I do see those divs that I stored in the list. However, when I iterate through that list and pass the obj to the flashAndMessage(), it does not work. It feels like the object is not the same when re-drawn or it loses some identity.
Code snippet not work because of restrictions, but code is tested and functional.
function unblink(selector) {
$(selector).stop();
$(selector).fadeIn({opacity: 1});
sessionStorage.href = "";
}
function blink(selector) {
$(selector).fadeOut('slow', function () {
$(this).fadeIn('slow', function () {
blink(this);
});
});
}
function flashAndMessage(selector) {
sessionStorage.href = $(selector).find('.hypLink').attr('href');
blink(selector);
}
if (sessionStorage.href) {
flashAndMessage($("a[href='"+sessionStorage.href+"']").parent().parent());
}
<div id="pull-requests-view">
<div class="green-header">This is the 1st title</div>
<div class="green" ondblclick="flashAndMessage(this)" onclick="unblink(this)" id="tile0">
<img class="profile-photo" src="someImageURL">
<div class="pill-green">
<a class="hypLink" href="UNIQUE_LINK_FOR_EACH_DIV" target="_blank">tag information</a>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Assuming you have a parent to <div id="pull-requests-view"> that is not getting reloaded with your polling code, you should use event delegation (and not inline event handlers).
<div id="parent-id-that-isnt-updated">
<div id="pull-requests-view">
...
</div>
</div>
You can attach your event listeners to the parent that doesn't update and have it only trigger when the clicked element matches the selector:
var $staticParent = $('#parent-id-that-isnt-updated');
$staticParent.on('dblclick', '.green', function() {
flashAndMessage(this);
});
$staticParent.on('click', '.green', function() {
unblink(this);
});
I have spent around 3 hours today trying to replace an html element on a page using JavaScript.
I have tried many things and haven't had much success.
For example, if I wanted to replace code snippet 1 with the code snippet 2, how would that be done?
I have tried
document.getElementById('wide-left').innerHTML="(code snippet 1)";
but it just throws an error.
Sorry if I didn't explain this clear enough, I tried my best.
Any help would be greatly appreciated.
Code snippet 1
<h4 id="select-head">Select</h4>
<h4 id="summary-head">Summary</h4>
</div>
Code snippet 2
<div class="col9 single-product" id="wide-left">
<div class="product-name hidden-lg">
<h2><span>Reebok Ventilator x Mita</span> <em class="stockcode"><span>M48281</span></em></h2>
</div>
<!-- end of .product-name -->
<div class="row unexpanded" id="product-info">
<div class="col4 product-pic-width">
I'll try to illustrate the basics for modifying HTML using the snippet tool here:
var snip1 = document.getElementById("snip1"),
snip2 = document.getElementById("snip2");
setTimeout(function() {
snip1.innerHTML = snip2.innerHTML;
}, 1000); // This code copies the HTML from within snip2 to snip1.
setTimeout(function() {
snip2.innerHTML = "";
}, 2000); // This code clears snip2.
setTimeout(function() {
snip1.getElementsByTagName("span")[0].style.color = "blue";
}, 3000); // This code changes the CSS for <span> within snip1.
setTimeout(function() {
snip2.textContent = snip1.innerHTML
}, 4000); // This code copies the HTML from snip1 as text into snip2.
<div>
Here is some <span id="snip1"></span> content!
</div>
<div>
Here is some <span id="snip2"><span style="color:red">more</span></span>content!
</div>
Try to edit the elements after the document object model ("DOM") has loaded, otherwise you will encounter errors.
document.onload = function()
{
document.getElementById('wide-left').innerHTML = '<p>This is some HTML</p>';
}
I have two divs with individual id's and a class to style the same.
foo_1 has a z-index so it's above foo_2.
<div id="foo_1" class="foo"><p>I'm awesome.</p></div>
<div id="foo_2" class="foo"><p>No, I am.</p></div>
What I'd like to do is to have foo_1 fade out with foo_2 behind it.
I did try this;
HTML
<div id="foo_1" class="foo"><p>I'm awesome</p></div>
<div id="foo_2" class="foo" style="display: none;"><p>No, I am.</p></div>
jQuery
$(document).ready(function()
{
setTimeout(function()
{
$("#foo_1").fadeOut("slow", function ()
{
$("#foo_1").remove();
$("#foo_1").html($("#foo_2").text());
$("#foo_1").show();
});
}, 5000);
});
Thanks!
setTimeout(function()
{
$("#foo_1").fadeOut("slow", function ()
{
// remove $("#foo_1").remove();
// line from code,
// because, its removing #foo_1 from dom,
// so in next strp you can't catch it
// $("#foo_1").remove();
$("#foo_1").html($("#foo_2").text());
$("#foo_1").show();
});
}, 5000);
Sounds to me like what you're doing is a bit of an overkill.
Let me summarize: You have two divs, they are positioned at the same spot, but only #foo_1 is visible because it's on top. You now want to hide #foo_1 to reveal #foo_2.
So it should be sufficient to make #foo_2 visible while fading out #foo_1:
setTimeout(function() {
// Make #foo_2 visible
$('#foo_2').show();
// Fade out #foo_1
$('#foo_1').fadeOut('slow');
}, 5000);
Just use standard jQuery function with parameter in ms FadeOut(500), FadeIn(500):
$(document).ready( function ()
{
$('#foo_1').fadeOut(1500);
$('#foo_2').text('No, I am!').fadeIn(1000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='foo_1' style='display:block;'> I'm awesome </div>
<div id ='foo_2' style='display:none;'></div>
instead of a whole page refresh after a certain time, i'd just like a specific div container to reload/refresh. is there any way to do this?
<div id="wrapper">
<div id="quoteContainer"></div>
</div>
You can get the effect you desire with jQuery and Googles ajax api
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript">
var auto_refresh = setInterval(
function ()
{
$('#load_latest_scores').load('latest_scores.html');
}, 10000); // refresh every 10000 milliseconds
</script>
<body>
<div id="load_latest_scores"> </div>
</body>
If you had a page that served quotes, like quote.html for example, you could do this:
setInterval(refreshQuote, 10000); //every 10 seconds
function refreshQuote() {
$("#quoteContainer").load("quote.html");
}
In this case the expected return from quote.html (or whatever source you have) it a simple string that is the quote, it will take this and replace the content of <div id="quoteContainer"></div> with it.
i think that one aproach would be
<script>
function render (){
$('#mydiv').html("<b>new stuff</b>")
}
window.setInterval(render, 500);
</script>