I've tried piecing together examples from searches, but can't quite get what I want to do to work. After trying for 3 days, I figured I'd reach out for help.
My goal is to open a hidden div and then load another page (from the same site) within it filling up the entire div. Ideally, I would like to be able to select any number of these external html files and have them load into that hidden div. Right now it is partially working, but the external html is only filling a portion of the div. It does the same thing for my local files.
Basically I would like to click any one of a number of links > open hidden div > load selected link > close and hide div > click different link > open hidden div again > load new link.
Here is what I have so far:
$(function () {
$('a#linkid').click(function () {
$('div#pagecontent').html('<object data="http://www.jsfiddle.net">');
$('div#overlayframe').slideToggle("slow");
});
});
<div id="overlayframe">
<div id="pagecontent"></div>
<div id="exitoverlayframe">exit
</div>
</div>
page link
#overlayframe {
position:fixed;
top:2.5%;
left:2.5%;
width:95%;
height:95%;
z-index:1000;
display:none;
background-color:red;
}
#exitoverlayframe {
position:absolute;
bottom: 0px;
right: 0px;
}
The demo provided is just loading jsfiddle into the div. What I'm looking to do is load an html file from the same domain. Not sure if that is important information or not.
Here is a demo of what I have so far
Demo
The object is taking default dimensions.
Add this to your css.
object{
height:100%;
width:100%
}
Related
I have read through various posts and searches online however have not got a solution as of yet. I have tried multiple articles here and elsewhere with little luck.
Situation: I have an accordion menu with members. I have some CSS and HTML working the image toggling. Meaning when you click a name is second col the image loads to the left in col 1.
Need: I need when page loads for each sections first image to load on page load.
I am using:
$(document).ready(function(){
document.getElementById("linkElement").click();
});
However this only loads one ID. I am looking for a script to handle 5 ID tags via the href links.
<li>Various Names first link in list</li>
so to be clear there are five sections that when the page loads the first image should be auto loaded.
Also: I am using the CSS and HTML to toggle this. It looks like:
#output img {
display: none;
}
#output img:target {
display: inline;
}
#output-2 img {
display: none;
}
#output-2 img:target {
display: inline;
}
This CSS handles the toggle between the href links per photo.
I am open to JS or JQuery
Please let me know if you need more info. Thanks in advance.
I'm trying to display a small 'back to top' div when I scroll down on my site.
Here is the code for my div (the style is inline whilst in development until I go through and move it all to a base.css file later on).
<div id="backToTop" style="position:fixed; right:10px; top: 200px; width: 50px; height:50px; color:#ffffff; background-color:#000000; visibility:hidden">Back to Top</div>
Fairly straightforward as you can see. I'm then trying to use jQuery to detect when the window has been scrolled down slightly to then show the div:
$(window).scroll(function(){
if($document).scrollTop() > 0){
$('#backToTop').show();
}else{
$('#backToTop').hide();
}
});
My problem is that the script doesn't appear to be triggered. When I scroll down the page, the div does not appear.
I have additional jQUery on my page for form validation so I have tried including this alongside that function within:
$().ready(function(){ /* Code goes here */ }
I've also tried including it outside of this but I've had no joy. I'm using Twitter bootstrap for the remainder of my page.
If anyone could point me in the direction of why this perfectly valid code isn't working, that would be great.
Cheers,
J
You have a typo in your code:
if($document).scrollTop() > 0){
There's a missing (:
if( $(document).scrollTop() > 0 ) {
^
Here's a working example: http://jsfiddle.net/U7scm/
Edit
I also noticed that you're setting visibility: hidden. jQuery's .show() and .hide() functions will toggle the display property, so use display: none instead of visibility: hidden
So I'm creating a wedding website for a family member and want a very simple way for people to enter a password before it reveals the site. It doesn't need to be secure.
I was thinking I could have a white "layer" above the website with a simple password form on it (the website will load underneath it). Then, when the password is entered, the white layer disappears and the website appears.
Can someone help me?
Here is a working example.
HTML
<div class="page">
HERE IS MY PAGE
</div>
<div class="cover">
HERE IS THE COVER
</div>
JavaScript (jQuery)
$('.cover').click(function(){
$(this).fadeOut(1000, function(){
$(this).remove();
});
});
CSS
.page{
background-color:green;
height:200px;
}
.cover{
background-color:yellow;
height:200px;
z-index:200;
position:fixed;
top:0;
left:0;
float:left;
width:100%;
}
See it on JSFiddle.
Uh.. since you've said it doesn't need to be secure (shudders), you'll be able to get away with......
Wrapping everything that pertains to your website in some container, let's say a div, throw a class on it 'main-content'. You have several options as to how you would like to hide it:
CSS display:none;
inline style: display:none;
height:0px;
In addition to your 'main-content', create a div on a similar level and give it an identifier, i.e. class of 'login-content'. Leave this untouched (i.e. visible).
When the DOM loads your login-content should be visible, whereas the main-content won't be.
When the user has 'successfully logged in', revert the styles. i.e. main-content -> display:block;, height:100%, whatever..
With the help of js you can do this:
var password;
var pass1="1234567";
password=prompt('Enter your password',' ');
if (password==pass1) {
$('body').show();
} else {
$('body').hide();
}
This is the source if you want more information:
http://www.pageresource.com/jscript/jpass.htm
My page is having left side menu and right side content with links.
When the links in the content are clicked then i need an iframe loading the content in the link and come up so that it covers the right side div having the content.
This iframe should be minimized when not needed and should be visible like a bar at the bottom always floating and when reached bottom of page it should be visible above the footer bar.
Can anyone suggest me how to do this. If example is provided that will be much better.
Thanks,
Sandeep
Im attaching a demo layout of what i wanted.
If you structure your right side content with a containing div, and within that div make a nested div that holds your regular content and an iframe; then you can setup click handlers for your link that will hide the nested div and show the iframe:
$(document).ready(function() {
$('#inner_div > a').live('click', function() {
$('#inner_div').slideUp();//just an example animation, you can set whatever attributes you would like with jquery, like just change the height with .css({height: '0px'})
$('#iframe_id').slideDown();
});
});
<div id="outer_div">
<div id="inner_div">
Link Text
</div>
<iframe id="iframe_id" style="display:none;"></iframe>
</div>
----EDIT----
As for the floating bar attached to the bottom of the page:
<div id="floating_footer" style="position: absolute; bottom: 0px; right: 0px; width: 90%; height: 50px; background-color:#069;"></div>
And if you want to hide this "floating div" when the iframe shows up, just add the following to the javascript code (right with the other slideUp/slideDown code):
$('#floating_footer').slideUp();
I have a simple blog page - a list of posts that each consist of a title and contents. When the page loads I want all posts' contents hidden until their titles are clicked. The following code accomplishes this but with an unwanted side effect - the on-page-load hide() function that hides each post's content also hides the background of the containing (id="content") div:
Relevant JavaScripts:
$(document).ready(function() {
$(".blog_post p").hide();
//BLOG CONTENT ANIMATION
$('.blog_post').click(function() {
$(this).find('p').slideToggle(130);
});
});
Summary of blog page:
<section class="grid_7">
<div id="content">
<div class="blog_post">
<div class="blog_head">
<h2>Title</h2>
</div>
<p>Contents</p>
</div>
</div>
</section>
Relevant CSS:
section {
border: 1px solid white;
}
#content {
margin: 20px;
background-image:url('../images/content_background.jpg');
}
When the page loads the list of titles displays without the #content parent div's background. However when I click on a post's title the #content div's background shows up behind all posts up to and including that one.
Any idea what's going on?
It sound like you have some CSS that applies to the blog_head elements, that makes them float, for example:
.blog_post { float: left; }
In that case, the reason that the background doesn't show up is that the height of the content div is zero. A floating element doesn't affect the size of its parent, and when the content div only contains the headers, the height becomes zero. The background is still there, but there is no area where it's visible.
Add an overflow to the content div, that will make it contain its children:
#content { overflow: hidden; }
Note that this will not hide anything as long as you don't specify a size for the content element, it will just change how it's rendered so that it will become a container for its children.
A bit of a stab in the dark: Your #content div will, of course, be a lot shorter as the blog posts aren't there, basically consisting just of the divs with the titles. Perhaps that's the problem.
Does the image have a blank (or subtle) bit at the top or something, so that it's only apparent that it's there when there's more content in the #content div (e.g., when it's taller)? Or is there some other reason you can see that when #content is really short, you wouldn't see the background on the part of it that's there? (You can use the debugging tools in most modern browsers to see what the dimensions of the #content div are when the paragraphs are hidden; or slap a border on it temporarily, but tools these days are pretty good.)
Basically, since the jQuery doesn't, of course, actually hide the background, it must be a side-effect of the paragraphs being hidden — because of the effect that has on the dimensions of the #content div.
This is working fine for me:
HTML:
<div class="blog_post">
<div class="blog_head">
<h2>Title</h2>
</div>
<p>Contents</p>
</div>
</div>
CSS:
section {
border: 1px solid white;
}
#content {
margin: 20px;
background-image:url('http://bluebackground.com/__oneclick_uploads/2008/04/blue_background_03.jpg');
}
JS
$(document).ready(function() {
$(".blog_post p").hide();
//BLOG CONTENT ANIMATION
$('.blog_post').click(function() {
$(this).find('p').slideToggle(130);
});
});
Check it live here: Jsfiddle example