Set div height dynamically using inline CSS and invoking a javascript function - javascript

For my purposes, I need to set the div height as quickly as possible.
Using the document.ready() event is not fast enough, so I want to set the inline CSS style of the div.
How can achieve something like this?
<div id="map-container" style="height:javascript(getwindowheight)px;">
<div id="map">
</div>
</div>
function getwindowsheight() {
return window.height;
}
Any suggestions?

Since you want it to be dynamic, you will need to pay attention to the following events:
window resize
window ready
Set your HTML first:
<div id="map-container"></div>
And then inside your JavaScript, setup a function to detect those:
var applyMapContainerHeight = function() {
var height = $(window).height();
$("#map-container").height(height);
};
document.ready(function() {
applyMapContainerHeight();
});
$(window).resize(function() {
applyMapContainerHeight();
});

Then don't use document.ready
just execute your js after div
<div id="map-container">
<div id="map">
</div>
</div>
<script type="text/javascript">
$('#map-container').css({ height: 'your height'});
</script>

Provided that jQuery is script files are included in the very beginning of your HTML, place some scripting right after the div declaration:
<div id="map-container">
<div id="map">
</div>
</div>
<script type="text/javascript">
$("#map-container").height(getwindowsheight());
function getwindowsheight() {
return window.height;
}
</script>

<div id="map-container">
<div id="map">
</div>
</div>
<script type="text/javascript">
document.getElementById("map-container").style.height= $(window).height() + "px";
</script>

Related

Changing the background colour of a div in an iframe from the parent page isn't working

I have this in the <head> of the parent page:
<script type="text/javascript">
$(document).ready(function () {
$('#innerframe').load(function () {
$(this).contents().find($(".TitleBG")).css("background-color", "red");
});
});
</script>
<iframe src="/HomePage.aspx" onload="GetAlerts();" id="innerframe"></iframe>
Then I have an example div in the iframe's .aspx page:
<div class="col-md-12">
<div class="col-md-1 TitleBG">Drive</div>
<div class="col-md-3 TitleBG">Name</div>
<div class="col-md-1 TitleBG">Type</div>
<div class="col-md-1 TitleBG">Format</div>
<div class="col-md-2 TitleBG">Free Space</div>
<div class="col-md-2 TitleBG">Available Space</div>
<div class="col-md-2 TitleBG">Drive Size</div>
</div>
I want to replace the background-color property of the divs that have the class 'TitleBG', but my attempt doesn't seem to be working (above jquery)?
It works when I perform the $(".TitleBG").css("background-color", "red"); on elements within the parent page, though.
Instead of
find($(".TitleBG"))
use
find(".TitleBG")
It looks like this is deprecated:
$('#innerframe').load(function () {
So I have to use this:
$('#innerframe').on('load', function () {
As after 1.8 it's (original code in question) no longer valid
Also:
Instead of
find($(".TitleBG")) use
find(".TitleBG")
As user Wiizl states is another issue.
<script type="text/javascript">
$(document).ready(function () {
$('#innerframe').load(function () {
var iFrameDOM = $("iframe#innerframe").contents();
iFrameDOM.find(".TitleBG").css("background-color", "red");
});
});
</script
This will not work for third party iframes however.
You can't alter a iframe page. It would be too easy.
You should consider making AJAX call and create DOM elements : https://api.jquery.com/jquery.ajax/
Try the actual id instead of this and change the find to .find(".TitleBG")
<script type="text/javascript">
$(document).ready(function () {
$('#innerframe').load(function () {
$('#innerframe').contents().find(".TitleBG").css("background-color", "red");
});
});
</script>

on scroll "sticky-element" will need stick to before "footer-area" not on bottom of page

I have one "sticky-element" div, on page load which I have been set position:fixed with bottom right aligned.
Requirement : on page scroll I would like to set it stick to just before on my "footer-area".
Issue : I have handled successfully css and js part on load, but I am not able to find logic that how can i add another class to my "sticky-element" once "footer-area" will start visible on window.
HTML
<div class="container">
<div class="page-section">
<p>lots of code and other div nested in this as well</p>
</div>
<div class="sticky-element">
</div>
<div class="footer-area">
</div>
</div>
jquery
$(window).on("load",function(){
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if(){
$(".sticky-element").addClass("some-class");
}
else {
$(".sticky-element").removeClass("some-class");
}
});
});
css
.sticky-element { position:fixed; }
.sticky-element.some-class { position:static; }
In above one if() my logic is that I would like to use if "footer-area" is visible on window than only add class will works.
Please suggest if anyone has Simple and short(not too much complex) coding way for this.
Thanks in advance
Try something like that:
<div class="container">
<div id='wraper'>
<div class="page-section">
<p>lots of code and other div nested in this as well</p>
</div>
<div class="sticky-element">
</div>
</div>
<div class="footer-area">
</div>
</div>
$(window).on("load",function(){
$(window).scroll(function() {
var bottomOfWraper = $('#wraper').offset().top + $('#wraper').outerHeight();
var bottomOfWin = $(window).scrollTop() + $(window).height();
if( bottomOfWin > bottomOfWraper){
$(".sticky-element").addClass("some-class");
}
else {
$(".sticky-element").removeClass("some-class");
}
});
});

How to change Iframe height when clicked on button inside the iframe's content

Right now i want to make a simple jQuery function so when this function is called the iframe height is changing.
Here is my code:
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
function ChangeHeightF1()
{
$("#inneriframe").css({"height":"350px;"});
alert('The height was changed!');
}
</script>
<div id="outerdiv">
<iframe src="http://beta.sportsdirect.bg/checkout/onepage/" id="inneriframe" scrolling="no" target="_parent"></iframe>
</div>
Here is the code of the button which is in the content of the iframe:
<button type="button" onclick="parent.ChangeHeightF1();">Click me to change Height!</button>
So my questions is how it's possible to change the iframe height on button click inside the content which is holding the iframe.
Also what CSS i have to place on "outerdiv" div element so when the iframe height is changing it will change the height of the div holding the iframe as well ?
Thanks in advance!
You can use window.parent.document as a context in jQuery selector, and then manipulate CSS values.
$(":button").click(function(){
$('#inneriframe, #outerdiv', window.parent.document).css({"height":"350px"});
})
This should work. If you want to re size back to previous height, let me know.
http://jsfiddle.net/ko3pyy8c
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$( document ).ready(function() {
$('#more').click(function(){
$('#inneriframe').animate({height:'500px'}, 500);
$('#more').text('Go Back');
});
});
</script>
<style type = "text/css"/>
#inneriframe {
height: 350px;
overflow: hidden;
}
</style>
<div id="outerdiv">
<iframe src="http://beta.sportsdirect.bg/checkout/onepage/" id="inneriframe" scrolling="no" target="_parent"></iframe>
</div>
<br/>
Change Height
it can help you
<a href='#'>click me</a>
<div id="outerdiv">
<iframe src="http://beta.sportsdirect.bg/checkout/onepage/" id="inneriframe" scrolling="no" target="_parent"></iframe>
by using jquery
$('a').click(function(){
$('iframe').css('height','600px');
});

How to change a div's property by onclick event?

I want to change container's property by clicking on an image.
Why this doesn't work:
<script type="text/javascript">
function changeMargin(){
document.getElementById("container").style.margin.top="100px";
}
</script>
<div id="container">
<img id="btnRight" src="img/btnRight.png" onclick="changeMargin()">
</div>
It should be
.marginTop="100px";
Full code:
function changeMargin() {
document.getElementById("container").style.marginTop = "100px";
}
Change:
document.getElementById("container").style.margin.top="100px";
To:
document.getElementById("container").style.marginTop="100px";

Shortening my jQuery

How would I make this jQuery shorter? I assume there must be a better way of working than this!?
(bare in mind I am new to jQuery)...
<script>
jQuery(function() {
var White = jQuery("#white").hide();
jQuery("#firstpagename").on("click", function() {
White.toggle();
});
});
</script>
<script>
jQuery(function() {
var Black2 = jQuery("#v2black").hide();
jQuery("#secondpagename").on("click", function() {
Black2.toggle();
});
});
</script>
<script>
jQuery(function() {
var Black3 = jQuery("#v3black").hide();
jQuery("#thirdpagename").on("click", function() {
Black3.toggle();
});
});
</script>
Any help or directions would be greatt as I am down to the last step on this site and want it finished :)
You could use some extra data attribute and an extra class on your links to make it a little shorter.
So let's say your html looks like this:
<div id="white">white</div>
<div id="v2black">v2black</div>
<div id="v3black">v3black</div>
<div id="firstpagename" class="toggle" data-for="white">toggle white</div>
<div id="secondpagename" class="toggle" data-for="v2black">toggle v2bacl</div>
<div id="thirdpagename" class="toggle" data-for="v3black">toggle v3black</div>
then your jquery can rewritten like this:
jQuery(function() {
$('.toggle').on('click', function() {
var id = $(this).attr('data-for');
$('#' + id).toggle();
});
});
So it looks like we're trying to recreate standard "accordion" behaviour. Depending on the layout of your page, it can be helpful to encapsulate your items if possible. Here is one possible solution to make things that open and close. jsFiddle
<div id="white" class="panel">
<div class="tab"></div>
<div class="content"></div>
</div>
<div id="v2black" class="panel">
<div class="tab"></div>
<div class="content"></div>
</div>
<div id="v3black" class="panel">
<div class="tab"></div>
<div class="content"></div>
</div>​
<script>
jQuery(".tab").on("click", function() {
$(this).closest('.panel').find('.content').toggle();
});​
</script>
First we condensed the code into one script tag and one document ready statement, since having it in 3 pieces was only adding bloat.
Then I made sure to chose $ as the parameter for the doc ready callback. jQuery will kindly pass it one argument jQuery so inside our code block we can safely use $ even if outside our code-block it was reserved for other purposes.
Here the .tabs control their .content by traversing up to the nearest .panel and back down. In this way the same behaviour can control all 3.
If however your "tabs" can't be encapsulated like this you can always associate them to the content they are to show/hide in another way. We'll just need to see your html.
<script>
jQuery(function() {
var White = jQuery("#white").hide();
jQuery("#firstpagename").on("click", function() {
White.toggle();
var Black2 = jQuery("#v2black").hide();
jQuery("#secondpagename").on("click", function() {
Black2.toggle();
});
var Black3 = jQuery("#v3black").hide();
jQuery("#thirdpagename").on("click", function() {
Black3.toggle();
});
});
</script>
for the start. If you have many more elements, you might want to loop through a buttonid<>toggleid map:
var map = {
"white": "firstpagename",
"v2black": "secondpagename",
...
};
for (var toggler in map)
makeToggle(toggler, map[toggler]);
function makeToggle(togglerid, pageid) {
var page = $(document.getElementById(pageid)).hide();
$(document.getElementById(togglerid)).click(function() {
page.toggle();
});
}

Categories