Welcome,
I have this code:
html:
<script src="loginbox.js"></script>
<div class="menu" id="login">
<p class="menu">LOG IN</p>
</div>
js:
$('#login').on('click', function(){
document.getElementById('login').hide();
});
The div "login" isn't even clickable
Here you go :
$(document).ready(function(){
$('#login').on('click', function(){
$(document.getElementById('login')).hide();
});
});
When you mix pure JS and jQuery, you need to wrap pure JS in a jQueryObject.
PS:
I'd swap the $(document.getElementById('login')) for a $("#login") if I were you
Related
I'm trying to create a click event to a button but it ain't working.
This is what I've got so far:
<script type="text/javascript">
$(document).ready(function() {
$("#btn_showComments").click(function() {
alert("Hi from the button! :)");
});
});
</script>
<div id="#background">
<div id="#showMoreComments">
<button id="#btn_showComments">Show more comments!</button>
</div>
</div>
I know it's kind of a silly question. But what am I doing wrong?
First remove the "#" from the id declaration in button tag i.e have this:
<button id="btn_showComments">Show more comments!</button>
Second, move the script below the html.
Remove the # from the button id. The # tells JQuery to select an element with the following id.
Like this:
<div id="#background">
<div id="#showMoreComments">
<button id="btn_showComments">Show more comments!</button>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#btn_showComments").click(function() {
alert("Hi from the button! :)");
});
});
</script>
<button id="#btn_showComments">Show more comments!</button>
should be -
<button id="btn_showComments">Show more comments!</button>
then your code will work just fine. :)
Kindly don't use # in HTML tags for IDs. # is attached to get an element using its ID.
Try this code, actually you have added # in your html code for ids. Please remove it.
<script type="text/javascript">
$(document).ready(function() {
$("#btn_showComments").click(function() {
alert("Hi from the button! :)");
});
});
</script>
<div id="background">
<div id="showMoreComments">
<button id="btn_showComments">Show more comments!</button>
</div>
</div>
Remove the # from the element in the html.
<div id="background">
<div id="showMoreComments">
I'm working on an Drop-Down Menu but without success.
I want the same function like the Drop-Down menu by Sony.I have even tried to imitate this effect, but I had a few difficulties.
My HTML:
<div id="main_menu">
<div id="main_menu_container">
<div id="main_menu_links">
Startseite
<a id="drop_down_link1" class="main_menu_link">Events</a>
<a id="drop_down_link2" class="main_menu_link">Clan</a>
<a id="drop_down_link3" class="main_menu_link">Irgendetwas</a>
</div>
</div>
<div id="drop_down_container">
<div id="drop_down_content1" class="drop_down_content"></div>
<div id="drop_down_content2" class="drop_down_content"></div>
<div id="drop_down_content3" class="drop_down_content"></div>
</div>
jQuery:
$("#drop_down_link1").mouseenter(function (){
$("#drop_down_content1").stop().slideDown();
});
$("#drop_down_content1, #drop_down_link1").mouseleave(function (){
$("#drop_down_content1").delay(350).slideUp();
});
FIDDLE
The problem in my script is, when i leave drop_down_link1 or drop_down_content1 then the
content 'slideUp' but when i hover from drop_down_link1 to drop_down_content1 then there shouldn't be the function.
So my question is:
How can I do this that I can move between the link and the 'content' with my mouse without 'content' close?
My code is very unprofessional. How do I make it so that I do not repeat myself when 'Events' and 'Clan' have the same function?
http://jsfiddle.net/PKvZ2/
Try with this code. I added :
$("#drop_down_link1,#drop_down_container").mouseenter(function (){
$("#drop_down_content1").stop().slideDown();
});
$("#drop_down_content1, #drop_down_link1,#drop_down_container").mouseleave(function (){
$("#drop_down_content1").delay(350).stop().slideUp();
});
Or this
$("#drop_down_link1,#drop_down_container").hover(function (){
$("#drop_down_content1").stop().slideDown();
},function(){
$("#drop_down_content1").stop().slideUp();
});
http://jsfiddle.net/bT8Cp/
Very simple! Just handle both #drop_down_link1 and #drop_down_content1 mouseenter events as follows
$("#drop_down_link1,#drop_down_content1").mouseenter(function (){
$("#drop_down_content1").stop().slideDown();
});
$("#drop_down_content1, #drop_down_link1").mouseleave(function (){
$("#drop_down_content1").delay(350).stop().slideUp();
});
2.
$('#main_menu_container a.main_menu_link').each(function(index,item){
alert(index);
var $this=$(this),
$dropdownContent=$('#drop_down_container .drop_down_content')
[index];
......
});
I'm new to jQuery and try to show a div when the user is clicking on a button. The button is below the text and is suppose to move up and down.
I tried a couple of things but couldn't work it out.
This is my code:
HTML
<div class="travel_infobox">
</div>
<div class="clearfix"></div>
<div class="travel_info_button">
InfoBox
</div>
jQuery
<script>
$(document).ready(function(){
$("input.show").click(function(){
$(".travel_infobox").show("blind");
});
});
$(document).ready(function(){
$("input.hide").click(function(){
$(".travel_infobox").hide(blind);
});
});
</script>
You have to use $(document)ready(function() {}); just one time, it is needed to let jQuery know when the page is fully loaded to run your code.
Then, that input.show I suppose there is an input button with show class somewhere, otherwise it doesn't work.
<script>
$(document).ready(function(){
$("input.show").click(function(){
$(".travel_infobox").show("blind");
});
$("input.hide").click(function(){
$(".travel_infobox").hide("blind");
});
});
</script>
Try this. Where is your show and hide button? So I have added one.
<div class="travel_infobox">
Trave info
</div>
<div class="clearfix"></div>
<div id="travel_info_button">
InfoBox
</div>
<button id='show'>show</button>
<button id='hide'>hide</button>
<script>
$(document).ready(function(){
$("#show").click(function(){
$(".travel_infobox").show("blind");
});
});
$(document).ready(function(){
$("#hide").click(function(){
$(".travel_infobox").hide("blind");
});
});
</script>
I am using a jQuery function to add/remove a class to the clicked element, which works just fine. However when that element is clicked, I am trying to change the text of an HTML link and I cannot seem to get it working. The HTML link is located within the <span> element further down the page.
When <button id="people"> hasClass('user_view_active') the HTML link should display "People" when <button id="jobs"> hasClass('user_view_active') the HTML link should display "Jobs".
<script type="text/javascript">
$(document).ready(function() {
$('button').click(function(){
$('button').each(function(){
$(this).removeClass('user_view_active');
});
$(this).addClass('user_view_active');
});
if ($('#people').hasClass('user_view_active')){
$('.title').find("a").attr("href").text(text.replace('People'));
}else{
$('.title').find("a").attr("href").text(text.replace('Jobs'));
}
});
</script>
</head>
<body>
<div id="container">
<header>
<img src="images/header-name.png" width="200px" style="display: inline; margin-bottom: -10px;"/>
<button id="jobs" class="user_view">Jobs</button>
<button id="people" class="user_view_active user_view">People</button>
<div class="header_search_wrapper">
<form action="" method="POST">
<textarea class="header_search" name="app_search" placeholder="Search people, jobs, or companies" style="width: 430px;"></textarea>
<input type="submit" class="share_btn" value="Search">
</form>
</div>
</header>
<div id="main" role="main">
<!--! begin app content -->
<div class="right_sidebar">
<span class="right_title">Connection Suggestions</title>
</div>
<span class="title">Recent Updates >> People</span>
To replace the text within a link you can use the jQuery .text() function. This function can also get the text value and also set the text value - as is shown in the example below -
if ($('#people').hasClass('user_view_active')){
$('.title').find("a").text('People');
}else{
$('.title').find("a").text('Jobs');
}
This code would have to be wrapped in the callback function of the click event to work -
$(document).ready(function() {
$('button').click(function(){
$('button').removeClass('user_view_active');
$(this).addClass('user_view_active');
if ($('#people').hasClass('user_view_active')){
$('.title').find("a").text('People');
}else{
$('.title').find("a").text('Jobs');
}
});
});
Now each time the button is clicked, you can check for the existence of the user_view_active class on the #people element.
Okeydokey ?
Are you sure those are the right tags ?
<span class="right_title">Connection Suggestions</title>
Are you sure an <a> element inside a <button> element is a good idea?
<button id="jobs" class="user_view">Jobs</button>
role="main" is'nt a valid attribute, but will probably work anyway.
This just seems easier:
$(document).ready(function() {
$('button').on('click', function(){
$('button').removeClass('user_view_active');;
$(this).addClass('user_view_active');
$("a", ".title").text(this.id);
});
});
FIDDLE
Try this way:
$('#people').toggleClass('user_view_active').html($('#people').hasClass('user_view_active')?'People':'Jobs');
I have the following HTML code within the body:
<div id="hidden">
</div>
<div id="mainContianer">
<div id="firstChildDiv">
</div>
</div>
I am using the following code to get the child
$("div:first-child").attr('id')
But this returns "hidden" when I want it to return firstChildDiv, I have tried things like...
$("div[mainContainer ] div:first-child").attr('id')
$("div[id=mainContainer ] :first-child").attr('id')
$("#mainContainer :first-child").attr('id')
I know its a simple thing to do, but cant seem to see where I am going wrong...
Thanks
Your last selector
$("#mainContainer :first-child").attr('id')
works fine, if you correct the typo in the HTML (see this fiddle). It says mainContianer instead of mainContainer.
But, anyway, why don't you select simply by the id, if that element has an id?
$( '#firstChildDiv' )
$('#mainContainer > div:first-child').attr('id');
Try this,
$("#mainContianer:first-child").attr("id")
Check there is no space before ':'
Actually, you have a typo there in your html
<div id="mainContianer">
should be
<div id="mainContainer">
Then you can do
$("#mainContainer div:first-child").prop('id')
This uses prop rather than attr, which is slower and old jQuery Syntax
This is working for me....
$(document).ready(function(){
var a =$("#mainContainer div:first-child").attr('id');
alert(a);
});
this all return you first child of parent--in your case replace parent by mainContianer
$('#parent').children(":first")
$('#parent').children(":first-child")
$( $('#parent').children()[0] )
$('#parent').find(":first")
$('#parent').find(":nth-child(1)")
try - Child Selector (“parent > child”)
$("div > div").attr('id')
also try out
$("div div:first-child")
<html>
<head>
<script>
function getDiv(){
alert("answer = "+$('#mainContianer div:first-child').attr('id'));
}
</script>
</head>
<body>
<div id="hidden"></div>
<div id="mainContianer">
<div id="firstChildDiv">
</div>
</div>
<button onclick="getDiv()">click</button>
</body>
<html>
SCRIPT
<script language="JavaScript">
jQuery(document).ready(function($) {
$("#MY_BUTTON").click(function(event) {
$("div#PARENT_DIV").find("#CHILD_DIV").hide();
});
});
</script>
HTML CODE
<div id="PARENT_DIV">
<h1 class="Heading">MY HTML PAGE TEST</h1>
<br />
<div id="CHILD_DIV">THIS IS MY CHILD DIV</div>
</div>
<div class="MY_BUTTONS">
<a class="MySubmitButton" id="MY_BUTTON">
<span>Test it!</span>
</a>
</div>
for now in 2020 with jquery it can be like:
function myClickOnDiv(divPrm) {
let div=$(divPrm);
let targetElement=div.find('#my_id')
}
if say you div looks like this:
<div onclick=myClickOnDiv(this)><label id="my_id"></label></div>