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 .
Related
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
I want to place a large image inside a div and let the user scroll through the image using the mouse (click and drag to the desired direction). How can this effect be achieved?
CSS:
#image{
position: relative;
margin: 0 auto;
width: 600px;
height: 400px;
top: 300px;
background: url("http://www.treasurebeachhotel.com/images/property_assets/treasure/page-bg.jpg") no-repeat;
}
HTML:
<div id="image"></div>
EDIT:
I want to implement this myself in order to gain knowledge, 3rd party frameworks are last resort.
<html>
<body>
<div style="width:200;height:200;overflow:scroll;">
<img src="/home/james/Pictures/scone_ontology.png" />
</div>
</body>
</html>
Check out jQuery UI Draggable. The first example sounds like exactly what you are trying to do:
https://jqueryui.com/draggable/
So you just want 600w 400h div, with a "map" inside that you can scroll around and look at with the mouse? You're very close already.
Have a div with the size you want the end-product to take up. Make sure you set its css to overflow:scroll;. Then put your image inside this div. Your image can ofcourse also be the background-image of a div.
And that's it.
A cool trick would be to wrapp all this up in a div that is slightly smaller, with overflow:hidden. Just small enough to hide ugly scrollbars. But that might be bad usability.
I am facing an issue with a div not being displayed when it is toggled from display: none; to display: block;
HTML:
<div class="menus-container" style="display: block; top: 50px; height: 277px;">
.. some pretent content, which shows up in another place on the website ...
</div>
Which is toggled by js by a plugin JS which is minified so I cannot list the js, but I see in the developer toolbar that the style changes work.
I see that it has a height, I see that it has a width and a z-index of about 99999.To be sure I assigned in the developer tool bars all parent elements as well an z-index: 999 !important;
Still that div wont show up... any ideas? If you want to look at the example follow this link (redacted) - it only happens at a width of less than 850px.
The problem here isn't a z-index issue, it's that the menu is appearing outside of its parent, the header element, which has overflow set to hidden. Setting the overflow to visible reveals the menu. You'll want to do some other things too, like give the menu a solid background color so it's easier to read.
<header class="main-header collapsed-gallery-page-menu" style="overflow: visible;">
I have a overlay div look like below with id & class,
<div id="findBudget" class="openedlist bottom-side open" style="height: auto; width: 1080px; top: 80px;">
And it is perfectly showing overlay with open.
After browser click back from next page to this div page, while the page loads, the style of the id 'findBudget', need to change dynamically like below,
style="height: auto; width: ''; top: 80px;"
I tried with below jquery script in browser back function.
if ($('#findBudget').hasClass('open')) {
$('#findBudget').css('width','');
}
But still it is showing like this (old),
<div id="findBudget" class="openedlist bottom-side open" style="height: auto; width: 1080px; top: 80px;">
Please show me where I am doing mistake, before switch on coffee machine.
Thanks
Technically the code you have in your answer works just fine. I am guessing that either (1) it doesn't do what you want or (2) it doesn't work because of code that you haven't pasted into your answer (events not getting wired or things of that nature).That said, if you are just trying to hide the element you can call:
$('#findBudget').css('display','none');
See The Fiddle: http://jsfiddle.net/fd379/1/
EDIT: One more note - if you want the div to size exactly to the same size as the text you can use float: left. You can see this working in the following update to the fiddle: http://jsfiddle.net/fd379/2/
I'm assuming you want to erase the width instruction.
If that's all, you can set it with a zero px to ensure that it will arrive as zero.
if ($('#findBudget').hasClass('open')) {
$('#findBudget').css('width','0px');
}
If you want it to disappear, simply use
if ($('#findBudget').hasClass('open')) {
$('#findBudget').hide();
}
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();