Can you please take a look at this demo and let me know why I am not able to set the height of .box dynamically?
$(function(){
$(window).load(function(){ // On load
$('.box').css({'height':(($(window).height()))+'px'});
});
$(window).resize(function(){ // On resize
$('.box').css({'height':(($(window).height()))+'px'});
});
});
<section>
<div class="col-md-12" id="box-1">Height has been set!</div>
</section>
<section>
<div class="col-md-12" id="box-2">Height has been set!</div>
</section>
<section>
<div class="col-md-12" id="box-3">Height has been set!</div>
</section>
<section>
<div class="col-md-12" id="box-4">Height has been set!</div>
</section>
<section>
<div class="col-md-12" id="box-5">Height has been set!</div>
</section>
First, you are using the wrong selector. You need to query for your class which is named "col-md-12".
Then, you are using the window.load() event which was removed from JQuery in 3.0 (see here). You can either use $(document).ready(function() {}) or $(window).on("load",function(){})
Your code should look like this:
$(function(){
$(document).ready(function(){ // On load
$('.col-md-12').css({'height':(($(window).height()))+'px'});
});
$(window).resize(function(){ // On resize
$('.col-md-12').css({'height':(($(window).height()))+'px'});
});
});
You're referring to a class that's not present.
Instead of $(".box"), use $("[id^='box-']") - you're not looking for the ones with "box" class but the ones with an id property starting with the string 'box-'.
(Alternatively, you could add a "box" class to each element you want to size and leave the original jQuery selector; maybe it's a better approach, it depends on the logic of the rest of your site. You decide.)
$("[id^='box-']")
$(".box") and divs like class="col-md-12 box"
Related
I want to move a DOM element inside the DOM but whilst still keeping it in its own container.
Take the following HTML:
<div class="contain">
<div class="bit">A</div>
<div class="bit">B</div>
<div class="bit">C</div>
<div class="bit">D</div>
<div class="bit">E</div>
</div>
I want to put the .bit containing A to the end of this list, just below E whilst still keeping it inside the div .contain.
I have tried the following:
$('.contain').find('bit').first().appendTo('.contain');
and:
$('.contain').find('bit').first().insertAfter($('.contain').find('bit').last());
And neither of them work.
I have very little control over the HTML. For example I can't give each .bit its own unique ID.
Can someone explain what I am doing wrong?
Just append it to the same container and A is moved to the end of the list.
Your two attempts works - you have missed the . for the find('.bit') part.
See demo below:
$('.contain').append($('.contain .bit:first-child'));
// the below works too
// $('.contain').find('.bit').first().appendTo('.contain');
// and even this works
// $('.contain').find('.bit').first().insertAfter($('.contain').find('.bit').last());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="contain">
<div class="bit">A</div>
<div class="bit">B</div>
<div class="bit">C</div>
<div class="bit">D</div>
<div class="bit">E</div>
</div>
You need to use the class selector ., which you already use for .contain
$('.contain').find('.bit').first().appendTo('.contain');
working snippet:
$('.contain').find('.bit').first().appendTo('.contain');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="contain">
<div class="bit">A</div>
<div class="bit">B</div>
<div class="bit">C</div>
<div class="bit">D</div>
<div class="bit">E</div>
</div>
$(".child").css("background-color", $(".child div").val());
<div class="flexbox" id="flexbox">
<div class="child">
<div>#69d2e7</div>
</div>
</div>
I am trying to get the value and make it background-color of that element but i don't know what's wrong
The .val() method is primarily used to get the values of form elements such as input, select and textarea.
You need to use .text() to getting text of div tag.
$(".child").css("background-color", $(".child div").text());
If you have multiple .child in your document you need to use bottom code
$(".child").each(function(){
$(this).css("background-color", $("div", this).text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="flexbox" id="flexbox">
<div class="child">
<div>#69d2e7</div>
</div>
<div class="child">
<div>red</div>
</div>
<div class="child">
<div>green</div>
</div>
</div>
Make sure that you are referencing the script file correctly and that it is truly in the root of your project. If not use relative paths to specify the location. Something like:
<script src="<%= Url.Content("~/scripts/jquery-1.3.2js") %>" type="text/javascript"></script>
Then it does not appear like you are actually calling the document ready function that prevents jquery from running before the document is loaded.
$(document).ready(function(){ // jQuery methods go here... });
Here is the template whose DOM elements I am trying to control:
<template name='libraryTemplate'>
<div class="container-fluid library_container">
<div class="row">
<div class="col-sm-6">
<h1 id='maglens_library_header'>MY LIBRARY</h1>
<div id='library_page_break'></div>
<div id='folders_text'>
Folders:
</div>
</div>
<div class="col-sm-6">
<a class='button-text btn' id='add_new_button'>ADD NEW</a>
</div>
</div>
<div class="row">
<div class="col-sm-3 folders" id='google_drive_thumbnail'></div>
</div>
</div>
</template>
And here is the jQuery Im using to do so. My $('body') selector works fine, and my log statement just inside $(document).ready() behaves correctly, but why can't I target the selector $('.folders')? Upon inspection of the DOM, I can see exactly where the code is, but it's like jQuery thinks it doesnt exist?
$(document).ready(function(){
console.log('document ready');
$('.folders').on('click', function(){
console.log('folders clicked');
})
// $('body').on('click', function(){
// console.log('body clicked');
// })
});
I don't see any selectors named folders.
I do see <div id='folders_text'>.
That's why your body event fires but your other one doesn't.
Secondly, you should be using template events, you're working with Meteor now.
Template.libraryTemplate.events({
'click .folders': function() { console.log('clicked') }
})
I'd definitely recommend using the meteor events as everyone else suggested.
What you had actually works, it is just since the div with the "folders" class has no content, the div is very small (unless you have a height attribute on ".folders" or "#google_drive_thumbnail") and thus very hard to click on. Inspect element on the div and you'll see the size
I've done some research and nothing seems to be working. Here is the HTML followed by the JavaScript I am putting together. What I am trying to do is set it up so that whenever dashboard_gear_options is clicked, it toggles the appropriate hidden options row. Each block of code exists multiple times at different locations on the page. I tried using this, find, parent, next and children to no avail.
HTML:
// start block
<div class="content_block_holder">
<div class="content_top">
<div class="dashboard_gear_options"></div>
<div class="dashboard_gear_divider"></div>
</div>
<div class="dashboard_holder">
<div class="hidden_options_row"></div>
</div>
</div>
// end block
// start block
<div class="content_block_holder">
<div class="content_top">
<div class="dashboard_gear_options"></div>
<div class="dashboard_gear_divider"></div>
</div>
<div class="dashboard_holder">
<div class="hidden_options_row"></div>
</div>
</div>
// end block (etc..)
JS:
$(document).ready(function(){
$('.dashboard_gear_options').click(function(){
$(this).parent('.content_block_holder').find('.hidden_options_row').toggle();
});
});
Try using closest([selector]) ( http://api.jquery.com/closest/ ) instead of parent in your selector. It will traverse up the tree and find "content_block_holder". parent([selector]) will just check the immediate parent and return an empty set if it doesn't match the selector provided.
$(document).ready(function(){
$('.dashboard_gear_options').click(function(){
$(this).closest('.content_block_holder').find('.hidden_options_row').toggle();
});
});
JSFiddle based on your code: http://jsfiddle.net/gK7yM/
try this
$(this).closest('.content_block_holder').find('.dashboard_holder').find('.hidden_options_row').toggle();
Also this chain works:
$(this).parent().next('.dashboard_holder').children('.hidden_options_row').toggle();
or
$(this).parent().next('.dashboard_holder').find('.hidden_options_row').toggle();
I have got to this so far using the jQuery docs
$('[class^="layout"] > ("*")').click(function(e) {
alert("inside");
});
What I am trying to achieve is detecting whether something inside a div which has a class beginning with the name 'layout' is clicked and returning that parent div's class.
For context an example div would be something like
<div class="builder_body" id="the_content">
<div class="layout_2cwlh_header">
<h1>Header</h1>
</div>
<div class="layout_2cwlh_wrapper">
<div class="layout_2cwlh_content">
<h1>Content</h1>
<p>sometext</p>
</div>
<div class="layout_2cwlh_sidebar">
<h1>Sidebar</h1>
</div>
</div>
</div>
So when I click on anything like a h1/p or anything inside a div, I need to return the parent div's class
I'd suggest:
$('[class^="layout"]').click(function(e) {
e.stopPropagation(); // added to prevent a new alert every
// time the click bubbles to a new parent
alert($(this).closest('div[id]').attr('id'));
});
JS Fiddle demo.
Quite simple actually:
$('[class^="layout"]').click(function(e) {
var parent = $(this).parent;
// do something with the parent.prop('class');
});