I have an absolute div, and a parent div. How I can define the height of the parent based on the absolute div, knowing I have images which take some time to load?
CSS:
#parent {
overflow:hidden;
width:100%;
}
.absolute {
overflow:hidden;
width:100%;
height:100%;
}
HTML:
<div id="parent" style="height:[HEIGHT OF CHILDREN]">
<div id="absolute1" class="absolute">
[LOTS OF CONTENT WHICH MAKE A VARIABLE HEIGHT, INCLUDING IMAGES WHICH TAKE SOME TIMES TO LOAD HERE]
</div>
<div id="absolute2" class="absolute">
[LOTS OF CONTENT WHICH MAKE A VARIABLE HEIGHT, INCLUDING IMAGES WHICH TAKE SOME TIMES TO LOAD HERE]
</div>
</div>
SAMPLE LINK 1
SAMPLE LINK 2
JS:
jQuery(document).ready(function($) {
$('a').bind('click', function(e) {
var target = $(this).attr('href');
if($(target).html() !== undefined ) {
$('#parent').css({
'height': $('#parent').find(target ).height(),
})
}
e.preventDefault();
});
// The problem: height is not correct until image is loaded/in cache
$('a[href="#absolute1"]').trigger('click');
});
instead of running your code inside $(document).ready(...) use:
$(window).load(function(){
// Your code here
});
This will ensure the assets of the page have loaded, including images.
Related
I currently have a div on my page that I would like a user to be able to click and maximize the div so it appears over the whole screen. I would like it to be similar to how Gmail has a button that allows you to maximize what the user is looking at, and then return to the original size with another click of a button.
The problem I ran into is that my div contains 3 divs inside of it.
Here is my HTML
<div id="pre">
<div id="pre-title">Pre Reading</div>
<div id="pre-text">blahhh.</p></div>
</div>
<div id="passage">
<div id="passage-title">2.2.3</div>
<div id="passage-text">blahlkdsfjahlskdjfh</div>
</div>
<div id="media">
<div id="media-title">Media Videos</div>
<div id="media-text">even more garbage</div>
</div>
These div's are placed directly next to each other on the page and I would like it if I could include a button next to the title that would allow the user to make the section larger, like they were maximizing the readings.
Just giving you the glimpse, change styling as per your requirement.
WORKING:DEMO
JS
$(document).ready(function () {
$(".readmore").click(function () {
var readMore = $(this).parent().attr("id");
var mainDiv = $("#" + readMore).parent().attr("id");
var textDiv = mainDiv +"-text";
$("."+ textDiv).toggleClass("maximize");
});
$(".close").click(function () {
$(".pre-text, .passage-text, .media-text").removeClass("maximize");
});
});
<script>
$(document).ready(function() {
$('#pre').click(function(e) {
$('#pre').toggleClass('maximized', 500); // 500 ms to animate
} );
} );
</script>
<style>
#pre {
width: 50px;
}
#pre.maximized {
width: 500px;
}
</style>
Please take a look at this FIDDLE that shows and hides the text in a container on click . What I'm trying to do is that when I click open the first hidden text and then scroll down to click open another one, I want it to scroll back to the sibling image of that opened text to keep it in view. How can I find the sibling element and scroll to it on click?
This one is not valid.
$('.slider2').click(function(e) {
var imageposition = $(this).closest('.imageclass');
$(document.body).animate({scrollTop: imageposition.offset().top}, 'fast');
});
HTML:
<div class="container" style="border:2px solid #222;">
<img class="imageclass" style="width:100px;height:100px" src ="image.jpg">
<div class="slider2">Hi</div>
<div class="internal" style="display: block;">Text<p></p></div>
</div>
<div class="container" style="border:2px solid #222;">
<img class="imageclass" style="width:100px;height:100px" src ="image.jpg">
<div class="slider2">Hi</div>
<div class="internal" style="display: block;">Text<p></p></div>
</div>
..............
JS:
$('.slider2').click(function(e) {
e.preventDefault();
$(this).next(".internal").load($(this).data("ship"));
$('.internal').slideUp('normal');
if ($(this).next().is(':hidden') === true) {
$(this).addClass('on');
$(this).next().slideDown('normal');
}
var imageposition = $(this).closest('.imageclass');
$(document.body).animate({scrollTop: imageposition.offset().top}, 'fast');
});
$('.internal').hide();
You've at least a couple of problems here
$(this).closest('.imageclass') doesn't select the image that is previous sibling of <a>
even if you get your desired image, the moment your scrolling code runs, the image has not placed itself to its final position.
using $(document.body) to scroll the window (I'm doubtful about it myself)
Below code selects the right image element, gets the scrolltop at right moment, and scrolls the html, body using working syntax.
$(function () {
$('.slider2').click(function (e) {
e.preventDefault();
$(this).next(".internal").load($(this).data("ship"));
$('.internal').slideUp('normal');
var imageposition = $('.imageclass', $(this).closest('.container'));
if ($(this).next().is(':hidden') === true) {
$(this).addClass('on');
$(this).next().slideDown('normal', function () {
$('html, body').animate({scrollTop: $(imageposition).offset().top})
});
}
});
$('.internal').hide();
});
There's a bit of a problem with how your scrolling function works because the position of the active .container alters in relation to other containers(when active and inactive state).
Also, you should not be looking for the closest position but for its parent element.
Please take a look at my code: CSS
.slider2 {
margin:40px;
}
.internal p {
padding:5px;
}
.internal h3 {
text-align:center;
}
.container {
position: relative;
}
You might need to look for a way, to detect the height of an inactive container since I made mine as a static value.
JS:
$('.slider2').click(function (e) {
e.preventDefault();
$(this).next(".internal").load($(this).data("ship"));
var containerHeight = 205;
var containerIndex = $(this).offsetParent().index();
$('.internal').slideUp('normal');
if ($(this).next().is(':hidden') === true) {
$(this).addClass('on');
$(this).next().slideDown('normal');
}
var scrollPosition = containerHeight * containerIndex;
$('body').animate({
scrollTop: scrollPosition
}, 'fast');
});
$('.internal').hide();
The content of a div will be set dynamically. The div #background, should adapt to the height that (separate) div will have. The background also should adapt to resizing of the div when the browser is resized. So the action should happen when the page loads, or when the browser is resized.
<div id="wrapper">
<div id="background"></div>
<div id="content">
<p>This content will be set dynamically.
<br>The div #background should adapt to this height.
<br><br><br><br><br><br>
<br>This should happen when the page loads,
<br>or when the browser is resized.
<br>At this moment, it only works when
<br>the page loads.
<br>
</p>
<!-- end #content -->
</div>
<!-- end #wrapper -->
At this moment, it only works when the page loads eventhough I added this code:
$(window).resize(function () {
$("#background").css({
height: ($("#wrapper").height() + 50) + 'px'
});
});
How can I get the resizing bit working? Thanks.
here is a jsfiddle to test this
Your resize handler is working as intended, but the issue is that #wrapper won't change height unless you give it height, so right now you're simply updating the height on #background to the same value each time resize is fired:
$(window).resize(function () {
$("#background").css({
height: ($("#wrapper").height() + 50) + 'px'
// ^^^^^^^^^^^^^^^^^^^^^^ this value never changes
});
});
Here's an updated demo where I've added
html, body, #wrapper { height: 100%; }
Demo
use display: inline-block.
$(window).resize(function () {
$("#background").css('display': 'inline-block');
});
You should use .on():
$(window).on("resize load", function () {
$("#background").css({
height: ($("#wrapper").height() + 50) + 'px'
});
});
does that work for you?
Trigger it on load.
$(window).resize(function () {
$("#background").css({
height: $("#wrapper").height() + 50
});
}).trigger("resize");
http://api.jquery.com/trigger/
http://jsfiddle.net/dzdH5/
I've got this problem :
I have got 6 "outer" div's each have a img tag inside.
Following each 6 div's are another div with content for each 6 divs
I want when i click one "outer" div hide all outer div's and show me the next div content.
This is the function. Wich it works there http://jsfiddle.net/Weinz/jdFRw/4/
But on test site only hide .outerDiv doesn't show next .innerDiv
$(function() {
$(".outerDiv").click(function() {
$(".outerDiv").hide();
$(".innerDiv").hide();
$(this).next("div").show();
});
$(".innerDiv").click(function() {
$(".outerDiv").show();
$(".innerDiv").hide();
});
});
The real html code is this
<div class="block outerDiv"><img src="images/placeholder.jpg" width="165" height="74" alt="Temp" /></div>
<div class="container innerDiv" style="display:none;">
I think the problem is on .next but i try diferent options and nothing work.
If i don't set the display in the innerDiv it works...
Try this
$(function() {
$(".outerDiv").click(function() {
$(".outerDiv").hide();
$(".innerDiv").hide();
$(this).next("div").show().css('display', 'block');
});
$(".innerDiv").click(function() {
$(".outerDiv").show();
$(".innerDiv").hide();
});
});
I have inc/content.php file which contains iframe with src= to my domain.
On my index.php page I have button <button id="nextButton" onClick="viewNext();return false;">New</button> which when clicked calls following JavaScript function:
<script type="text/javascript">
function viewNext()
{
$('#content').load('inc/content.php');
}
</script>
Function loads iframe from inc/content.php file into index.php page <div id="content"></div>
How can I show loading.gif image while inc/content.php file gets loaded into index file?
You can display the loading image before loading the page, and hide it when done (use the second parameter for adding a callback which is called when the request has completed):
$("#loading").show();
$("#content").load("inc/content.php", function () {
$("#loading").hide();
});
Obviously, you need an element in your document with the ID loading, like:
<img id="loading" src="loading.gif" alt="Loading">
<script type="text/javascript">
function viewNext()
{
show_loading()
$('#content').load('inc/content.php' , hide_loading );
}
function show_loading(){ $('.loading').show() }
function hide_loading(){ $('.loading').hide() }
</script>
While "loading" is the classname of the div that contains loading.gif.
For the loading.gif image, you should put it into a div which can "float" at the center of your page like this :
HTMLCODE:
<div style="position:absolute; top:100px; left:50%;" class="loading">
<img src="/img/loading.gif" />
</div>
You can change the appearing position of the loading image by changing the inline style "top:... ; left:....;". If you want to posiion the loading bases on screen, instead of the page's position, then replace position:absolute; by: position:fixed; (although this won't work with IE)
If you want it to look nice, here is solution i use at job which puts a modal in the screen and a loading gif in the middle.
<script type="text/javascript">
function viewNext()
{
$('#loading').attr( 'src', 'some_path/loading.gif' );
$('#container').block( { message: $( '#loading' ) } );
$('#content').load('inc/content.php' , function(){ $('#container').unblock(); } );
}
</script>
it uses jquery.blockUI.js which allows me to block certain container, may be a div or the whole screen.
The html you need is this
<img id="loading" style="display: none;" src="" />