CSS overriding JavaScript [closed] - javascript

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 8 years ago.
Improve this question
I am trying to make the contactform originally hidden when the page is loaded, so contactform is to be hidden originally to do this in CSS i did:
#contactform{
display: none;
}
now in the HTML I have:
<div class="contactme" >Message me!</div>
and onclicking the message me it calls the function 'someFunc' the function hides the contactinfo but displays the contactform, the function is:
function someFunc() {
document.getElementById('contactinfo').style.display='none';
document.getElementsByID('contactform').style.display='block';
}
It hides the contactinfo perfectly as expected, however it doesn't show the contactform. I believe this could be because the CSS is overriding the function, is there any way to stop it from doing so and get it working as expected?

There is bad function name, correctly is small "d" and "Element" instead of "Elements"
document.getElementById('contactform').style.display='block';
^ ^

in your code document.getElementsByID is mention not document.getElementById USE THIS code:
function someFunc() {
document.getElementById('contactinfo').style.display='none';
document.getElementById('contactform').style.display='block';
}

Related

get the current element in (inline function in JavaScript)? [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 1 year ago.
Improve this question
I am trying to get the element itself through making a function in the div itself I want when someone clicks on the current Element the Element should be deleted by fading in pure JavaScript I have searched on the internet but not getting the answer there are many similar questions on Stack Overflow but none of them giving me the combined answer(Like getting current element through Js in (inline function)).
So anyone can help me
<div style="width: 100px;height: 100px;background:red;" onclick="(function(ele){
console.log('helo')
console.log(ele.currentTarget)})();">
Thanks in advance
This should do it:
I added an id to your div which can be accessed through the getElementById.
<div id='hello' style="width: 100px;height: 100px;background:red;" onclick="
(
function() {
document.getElementById('hello').style.opacity = 0;
document.getElementById('hello').style.transition = '0.5s';
}
)();">

jQuery to append content to div by id not working [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 7 years ago.
Improve this question
Im trying to append content from a json-encoded result of an AJAX call as follows:
$.each(results["data"], function(i, result){
$("#resultset").append = result["name"];
console.log(result["name"]);
});
When executing the code, console.log records the names of the data elements, but the div remains empty. Not sure why.
HTML:
<div id="resultset">
</div>
.append() is a function that you call, not a property that you assign a value to, so:
$("#resultset").append(result["name"]) ;
(Depending on what is actually in result["name"] you may also want to append some <br> elements, or wrap each result in a <p> element or something...)
Also you JS is trying to use the id "result_set" but in your html the id is "resultset" without the "_".
You've specified the id to be targeted in your JQuery as result_set, but the id in the html is resultset.
You need to make sure these match up exactly!

Access $(this) element inside .load() function [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 8 years ago.
Improve this question
I'm trying to remove loader icon from images after they have been loaded. In order to do that, I need to access $(this) but I cannot access the image element and remove js-image-loading class.
variable html contains dynamic HTML contents fetched via ajax.
$(html).find('img').load(function() {
$(this).removeClass("js-image-loading"); //ok image is done loading, remove icon
});
Is this possible to do?
You forgot to quote to the html selector $(html) should be $('html') but I suggest you to use *:
$('*').find('img').load(function() {
$(this).removeClass("js-image-loading");
});
Or, simply $('img').load()
try
$("html").find('img').load(function () {
$(this).removeClass("js-image-loading"); //ok image is done loading, remove icon
});
OR
$('img').load(function () {
$(this).removeClass("js-image-loading"); //ok image is done loading, remove icon
});
NOTE: html is string not object
DEMO

jQuery add html to original-title? [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 8 years ago.
Improve this question
I've got a button which looks like this:
<a class="buttonS bDefault tipN" id="customerBasket" original-title="<ul class='shoppingBasket'></ul>" href="#"><span class="icos-cart3"></span></a>
Its a tooltip and I want to append list-items to the class shoppingBasket.
I've tried by doing the following:
$('.shoppingBasket ul').append(<li><span class=\'basketPic\'>Test</span><span class=\'basketName\'>Test123</span></li>);
But I get the error:
SyntaxError: Unexpected token '<'
Any ideas what I'm doing wrong here?
You forgot your quotes:
$('ul.shoppingBasket').append("<li><span class='basketPic'>Test</span><span class='basketName'>Test123</span></li>");
EDIT after getting more info:
You're wanting to update an attribute, which is more complicated than just appending something to a dom element. But, you should be able to do it. Try something like this:
$button_title = $('.buttonS').attr('original-title');
$('body').append('<div id="cart-holder" style="display:none;">' + $button_title + '</div>');
$('#cart-holder ul.shoppingBasket').append('<li><span class=\'basketPic\'>Test</span><span class=\'basketName\'>Test123</span></li>');
$('.buttonS').attr('original-title', $('#cart-holder').html());
$('#cart-holder').remove();
This will add a div to the body with the HTML in original-title, append your HTML to it, set the original-title to it, then remove the element it just made. You'll likely have to tweak it to get the effect you want.
Fiddle
Please note that the append() method accepts a string. And you should always add a string to its parameter. Otherwise it won't work for you and you'll get this error.
append("<li><span class='basketPic'>Test</span><span class='basketName'>Test123</span></li>")
This would do it. Otherwise, it won't work.

JQuery not hitting when using secondary class as selector [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 9 years ago.
Improve this question
(Code below) Trying to get a hover effect on the text in a div. Using class selectors in JQuery and it's not hitting when I use $('.abc') but does work when I use $('#top-nav-1') - not sure why it can't be hit when I select it by the secondary class. I can go through and use all the ids, but I'd rather just use one class - after all, that's what they're for!
Thanks, in advance, for the input on this.
HTML:
<div id="top-nav-1" class-"container abc">The Text</div>
CSS:
.container {
color: black;
}
JQuery:
$('.abc').hover(function() {
$(this).css('color','red');
});
fiddle: http://jsfiddle.net/yB9Jq/
You have a typo: class=, not class- (= not -).
Also, jQuery's .hover() takes two functions as arguments:
.hover( handlerIn(eventObject), handlerOut(eventObject) )
So an example would be:
$('.abc').hover(
function() {
$(this).css('color','red');
},
function() {
$(this).css('color','');
}
);
Your fiddle, updated.
Your markup is incorrect. You need to have class="container abc" instead of class-"container abc"
<div id="top-nav-1" class="container abc">The Text</div>
http://jsfiddle.net/yB9Jq/1/

Categories