How do I check using javascript if the page I'm on contains a particular div... e.g turtles
if(document.getElementById("divid")!=null){
alert('Div exists')
}
if you have that div's id, you can do it that way:
var myDiv = document.getElementById( 'turtles' );
if ( myDiv ) {
//It exists
}
overwise, if it's a class, you'd better use a framework (jQuery here):
if ( $('.turtles').length > 0 ) {
//it exists
}
Like this:
<script type="text/javascript">
function CheckExists() {
var oDiv = document.getElementById("turtles");
if (oDiv) {
alert("exists");
}
else {
alert("does not exist");
}
}
</script>
The function must be located in bottom of page or called after page finished loading.
I'd just like to point out that document.contains is another way to do this.
document.contains is particularly useful if you have a web application whose components are rendered virtually before insertion into the DOM.
Related
I want to check if my #pax div has class named .is-show I made function to check with if statement but it doesn't work any help will be appericated.
function yle() {
var le = document.querySelector("#pax");
if (le.classList.contains("is-shown")) {
alert("hello");
}
}
yle();
<div id="pax" class="p-section--03 is-shown">
You should add your script tag after the DOM elements, this may be a cause where DOM is not loaded and your script is running first, Hence unable to find your elements.
<html>
<div id="pax" class="p-section--03 is-shown"></div>
<script>
function yle() {
var le = document.querySelector("#pax");
if (le.classList.contains("is-shown")) {
alert("hello");
}
}
yle();
</script>
</html>
Else everything is fine, Thanks.
What I am trying to achieve is that whenever you click an image, it changes the window.location url, toggling it between '#' and '#footer'. Right now, all I have is this:
<script>
function clickarrow(){
var rd=Math.floor(Math.random()*11)
if (rd > 5){
window.location="#footer";
}
else{
window.location="#";
}
}
</script>
As you can see, this makes a 50:50 chance of either change being made. It works as a temparary fix, but sometimes you have to click up to 6 times for it to take effect.
Is there a way of doing this that properly toggles the window.location?
I am using jQuery 1.9.
If you're trying to reliably toggle the hash, rather than using a random chance, try something like this:
function clickarrow(){
var showFooter = true;
return function () {
if (showFooter) {
window.location.hash = "footer";
} else {
window.location.hash = "";
}
showFooter = !showFooter;
}
}
jQuery(function () {
jQuery('#myToggleLink').click(clickarrow());
});
Note: Normally when binding events, a function reference must be passed in. Here, I'm invoking clickarrow() since it returns a function by design. The returned function encapsulates the toggle variable via closure.
you can use data attribute to tell what is next step:
$('#arrow').click(function() {
if ($(this).data('footer'))
{
window.location="#footer";
$(this).data('footer', 'false');
alert('b');
}
else
{
window.location="#";
$(this).data('footer', 'true');
alert('a');
}
});
I'm working with a client proyect which is working with lot's of iframes inside others.
The problem is that I want to add an addEventListener in all iframes automatically from the absolute parent document, an example schema would be this:
Document: iframe1, iframe2
Iframe1: iframe1.1, iframe1.2
Iframe1.1: iframe.1.1.1, iframe 1.1.2
I want to simulate something like this:
iframes[i].contentWindow.document.getElementsByTagName('iframe')[0].contentWindow.document.getElementsByTagName('iframe')[i]
I wrote this code, but I have an "undefined" error:
window.onload=function(){
eventoIframe(document,null,1);
}
var eventoIframe=function(target,prev_target,lvl){
console.log('Ejecuto funcion por '+lvl+' vez');
var iframes=target.getElementsByTagName('iframe');
if(lvl>2){
var iframes=prev_target.target.getElementsByTagName('iframe');
}
if(iframes.length>0){
for(var i=0;i<=iframes.length-1;i++){
var iframe=iframes[i].contentWindow;
iframe.addEventListener("click",function(event){
console.log('click on:', event.target)
},false);
eventoIframe(iframe.document,target,lvl+1);
}
}
}
Okay, I found the mistake, I don't know why I wanted to know the prev target hehe
The solution is
window.onload=function(){
eventoIframe(document);
}
var eventoIframe=function(target){
var iframes=target.getElementsByTagName('iframe');
if(iframes.length>0){
for(var i=0;i<=iframes.length-1;i++){
var iframe=iframes[i].contentWindow;
iframe.addEventListener("click",function(event){
//code to be execute on each iframe
},false);
eventoIframe(iframe.document);
}
}
}
Have the following code:
$("#blogs").mouseover(
function () {
$(this).addClass("hover");
$("#home").removeClass("hover");
$("#homepages").removeClass("hover");
$("#apps").removeClass("hover");
$("#facebook").removeClass("hover");
$("#kontakt").removeClass("hover");
$("#content").hide().load("blogs.html", function(){
$("#content").show("slide");
});
});
Works all fine, but now I would like the load() / show() function only be called if #content does not already contain blogs.html.
In other words: I would like to check if blogs.html is already loaded and if yes, simply do nothing and only if not there yet I would load and show it.
Have tried some things with hasClass() and some if-formulas but struggle to get this check.
Tried stuff like this:
$("#content section").hasClass("check_blog").hide().load("blogs.html", function(){
$("#content").show("slide");
Basically I just need to know how I can check if blogs.html is already the contents of #content.
Thanks a lot for any help. Regards, Andi
Add an ID to some element in blogs.html, say blogsloaded, then you can check for it with:
if (!$("#blogsloaded").length)
$("#content").hide().load("blogs.html" ...
Another method would be to store in a variable if you already loaded it:
if (!this.blogsloaded)
{
this.blogsloaded=true;
$("#content").hide().load("blogs.html" ...
}
I would split up your mouseover events into two namespaced events. One which will only run once.
// This event will only run once
$("#blogs").on("mouseover.runonce", function () {
$("#content").load("blogs.html");
});
// because this event will unbind the previous one
$("#blogs").on("mouseover.alwaysrun", function () {
$(this).off("mouseover.runonce");
$(this).addClass("hover");
$("#home").removeClass("hover");
$("#homepages").removeClass("hover");
$("#apps").removeClass("hover");
$("#facebook").removeClass("hover");
$("#kontakt").removeClass("hover");
$("#content").hide();
});
Update a data attribute on #content that contains the url or id of the currently loaded content. Also, you should handle the case where the user hovers over a different section before the previous is done loading.
var request; // use this same var for all, don't re-declare it
$("#blogs").mouseover(function () {
// exit event if the blog is the current content in #content
if ( $("#content").data("current") == "blog") return;
$("#content").data("current","blog");
$(this).addClass("hover");
$("#home").removeClass("hover");
$("#homepages").removeClass("hover");
$("#apps").removeClass("hover");
$("#facebook").removeClass("hover");
$("#kontakt").removeClass("hover");
// if a previous request is still pending, abort it
if ($.isFunction(request.abort) && request.state() == "pending") request.abort();
// request content
request = $.get("blogs.html");
$("#content").hide();
// when content is done loading, update #content element
request.done(function(result){
$("#content").html(result);
});
});
I strongly suggest against using hover for loading content with ajax.
Also, in it's current form, this code is not very re-usable, you'll have to have one for each link. I suggest instead using classes and having only one event binding handling all of the links.
You can do it like this using .has() to detect descendants of content
$("#blogs").mouseover(
function () {
$(this).addClass("hover");
$("#home,#homepages,#apps,#facebook,#kontakt").removeClass("hover");
var $c = $("#content");
if($c.has('.check_blog')){ // if content contains an element with that class
$("#content").hide().load("blogs.html", function(){
$("#content").show("slide");
}
});
});
You could do something like this:
$("#blogs").mouseover(
function () {
$(this).addClass("hover");
$("#home").removeClass("hover");
$("#homepages").removeClass("hover");
$("#apps").removeClass("hover");
$("#facebook").removeClass("hover");
$("#kontakt").removeClass("hover");
if($('#content').html() == '') {
$("#content").hide().load("blogs.html", function(){
$("#content").show("slide");
});
}
});
I'm trying to set the current page to reflect in a main navigation bar. I've set a div in each page for JS / jQuery to check it's the right page with the following code:
$(document).ready(function() {
if ($('div').is('#example1-page')) {
$("a#nav-example1").addClass('nav-example1-current');
$("#nav-example1 p").css('display','block');
}
else if ($('div').is('#example2-page')) {
$("a#nav-example2").addClass('nav-example2-current');
$("#nav-example2 p").css('display','block');
}
else if ($('div').is('#example3-page')) {
$("a#example3").addClass('nav-example3-current');
$("#nav-example3 p").css('display','block');
}
});
I know there has to be a better way to do this with an array or something where I'm not repeating myself. Something where you can store the links IDs in an array and by clicking on the link with the right ID JS will know to set the current page in the navigation. I'm not sure where to start though.
Arrays of arrays are your friend :). Try this:
$(document).ready(function() {
var pageCounter=3;
var pages=[];
for(var i=1;i<=pageCounter;i++){
var selectors=["#example"+i+"-page",
"a#nav-example"+i,
"nav-example"+i+"-current",
"#nav-example"+i+" p"];
pages.push(selectors);
}
for(var i=0;i<=pageCounter;i++){
if ($('div').is(pages[i][0])) {
$(pages[i][1]).addClass(pages[i][2]);
$(pages[i][3]).css('display','block');
break;
}
}
});
Note: the logic to initialize the pages array does not need to be part of document.ready.
Try this
$(document).ready(function() {
if ($('#example1-page').length) {
$("a#nav-example1").addClass('nav-example1-current');
$("#nav-example1 p").show();
}
else if ($(#example2-page').length) {
$("a#nav-example2").addClass('nav-example2-current');
$("#nav-example2 p").show();
}
else if ($('#example3-page').length) {
$("a#example3").addClass('nav-example3-current');
$("#nav-example3 p").show();
}
});