jquery - sliding iframe hiding a div - javascript

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();

Related

Trying to focus on a specific div on click of an anchor link

I am trying to get focus on a specific div on click of an anchor link.
Here is the code
Link
I am facing a problem that the view is rendered from different partial views like header footer etc.
The header contains the link to a particular div from another view and it has a sticky navbar. When I click the link on nav bar it does focus on the div. But some part of div hides behind the header navbar.
Which looks clumsy according to the UI perspective.
Here is the navbar code:
<nav><li>Link</li></nav>
The example code for page div could be something like
<div id="divname">Some Content</div>
Please give me a clue how can I get the div to show just beneath the sticky menu bar.
Try with giving some margin-top to the div you want to focus on clicking, so that, the navbar will not hide your div and then change your href from
href="somepage.html#divname"
to
href="#divname"
only. Always give unique ids or classes to the elements in HTML so that the machine will not get confused between them and treat two different elements the same way. Hope this will work for you. If not post a response for help.
There's plenty of questions like this one on StackOverflow. Try this one for example:
https://stackoverflow.com/a/59380086/1973005
You can add a pseudo-element (::before) to the linked element in CSS, using the following settings. This creates an invisible block above the linked element which again creates an offset for the linked element position, since the top of that pseudo-element will actually be the position of the link anchor.
.anchor_offset::before {
display: block;
content: ' ';
height: 10em; // Whatever height your navbar is
margin-top: -10em; // Whatever height your navbar is
width: 100%;
visibility: hidden;
}
<div id="divname" class="anchor_offset">Some Content</div>

PDF Type view using html and css. Page overflow problem

I am trying to create a "document viewer" of sorts using html and css. I'm wanting the end result to look somewhat of a pdf when viewed in an iframe with no border.
I have a parent div setup with a class of paper. This has some box shadow and other styles attached to it.
<div class="paper">
</div>
Within this I have children divs setup with a class of page. This is where all the content sits for the page.
<div class="page">
</div>
My problem is when the content gets too long for a page and you scroll to the next "page" it all mixes together and looks like junk. I have attached a code pen to further assist in being able to visually see what I am struggling with.
CodePen
CodePen Link Here
You can change your page class in CSS with this:
.page {
height: 100%;
margin-bottom: 15px;
padding: 20px;
display: table;
text-align: center;
}
What is the problem?
If the content in your pages gets too long, it overflows the height end kind of "bleeds" on the next page.
What to do?
You should set a fixed height of 100vh to your paper
Then, tell it not to expand with: overflow: scroll
Use min-height to set the height of your page, instead of height: it will naturally expand the height of the pages instead as you content grows
Finally, just in case, set overflow: hidden to page

Slide in/slide out header div / reveal partially hidden div

I would appreciate some help and insight on a solution to this problem. I am developing a website with a header div of initial visible height of 180px. The header div is 340px in total height. When a user clicks on a link, I am needing the header div to slide down to reveal the rest (top) of itself. So, mathematically speaking, when a user loads the page, the bottom 180px of the 340px header div will be displayed. When they click the link, the rest of the div slides down to reveal its top 160px. When a user clicks the same link, the header div slides back up so only the bottom 180px is displayed again.
I have tried getting this to work, but am not sure what I am doing wrong. My initial thinking was to use slideToggle() (hide/show), but I can't seem to get that to work. Others on StackOverflow suggest animate(), but I don't know how to get that to work either.
I have searched on StackOverflow and seem to find a lot of questions regarding showing and hiding an entire div, but the problem is this completely shows and hides the divs. I am needing my div to slide down to reveal the top hidden portion and then slide back up to it's original resting position (-160px offscreen).
Any help would greatly be appreciated! I have included my starter code below:
HTML:
<div id="header">
Click me to reveal the top half of this div
</div>
JQuery:
$(document).ready(function(){
$('.toggle').click(function(){
$('#header').slideToggle("slow");
return false;
});
});
CSS:
#header {
position: fixed; /*I would like this div to always be fixed to the top of the browser window*/
top: 160px;
left: 0;
width: 100%;
height: 340px;
z-index: 10;
}
Try this JSFiddle, please.
http://jsfiddle.net/WFxLJ/3/

Move loading div down as ajax content loads

The form I am creating for a mobile website shows new fields based on previous selections. i.e. - a user selects and option from a dropdown menu (a date) and then a series of times shows up based on the day selected. The times are not showing until the day is selected.
I have a spinning loading div while the times are loaded in the background via ajax. The problem I am having is that the loading div sits at the top of the page when the 'action' is taking place about three-quarters of the way down. This 'action' part is in the viewport (it's a mobile website) and the loading div is at the top of the page - which is far above the users viewport.
How can I bring the loading div down so that it's always in the current viewport? How can I make the loading div follow the place in the form where the user currently is taking into account scrollbars?
I have been trying to use the vertically centred html/CSS model as described here:
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
But it is not working and the centre of the page doesn't seem to update at each event when a form element is clicked. I think I need to use the focus or blur event for the form field to update this and reassess, but I don't seem to be able to get it working.
Does anyone have any tips on how to move the loading div to the centre of the current viewport area each time the page increases in length?
If your loading div is designed to be inside the document flow - e.g. a new content block inside the form - it's best to use jQuery to insert the loading div inside the content itself. It will be very difficult to position it pixel-perfect otherwise.
If the loading div is to appear as an overlay to the document then you can use fixed CSS positioning with a high z-index. To center it on all screen resolutions use jQuery and the formula (window.height() - div.height())/2 as the top pixel position. The code will be similar to this answer.
Hope that helps
If you do something like this, and put the div inside your <body> tag, it will stay in the middle of the visible area.
div.loading {
position: fixed;
top: 47%;
left: 47%;
height: 6%;
width: 6%;
z-index: 1000;
}
Another solution is to put it at the end of the container content will be loading into. Just make sure to load the content before it. If you give it a margin:auto; it'll stay right in the middle and keep pushing down.
EDIT: It's also worth noting the answer here. This will prevent covering up something important in a way the user can't fix.
Set your loading div's position to fixed, this will of course cause it to escape from its parent in the DOM structure, you will then need to position it where you want it. Fixed positioning is relative to the visible area of the viewport.
<html>
<head>
<style type="text/css">
#loader {
height: 30px;
position: fixed;
top: 50%;
left: 50%;
background: #ccc;
}
</style>
</head>
<body>
<div id="loader">Loading...</div>
</body>
</html>
This will result in the loader div always being centered on the screen, no matter where the user has scrolled, left/right up/down.

simple jquery tabs integration into a gallery

I implement in my gallery a tabbing system, I have two tabs "gallery1" and "gallery2", first tab it's ok but 2nd tab loads only 1 image,
I've found this
<div class="container" style="margin-left: 10px; width: 0px; left: 0px;">
and I removed the width but the horizontal scrolling of the thumbnails doesn't work.
I think something is positioned incorrect in css or in the html markup(the integration of tabs in actual gallery) because the javascript code is fine ( if I remove the tabs the gallery is showing properly).
Check out this link to see what I'm talking about.
Or give me another solution for not displaying both thumbnail containers simultaneously
Many Scripts can't work without the actual container visible.
Try setting up the Tabs script after initializing the gallery, and make sure both tabs are visible on gallery init.
Please remove the width tag of div:
this time is : <div class="container" style="margin-left: 10px; left: 0px; width: 0pt;">
now changed:<div class="container" style="margin-left: 10px; left: 0px;">
I have work in inspect Element of browser and and show all images in both tabs.
Please remove "width" tag .

Categories

Resources