I basically have a fixed width DIV with an unordered list inside that overflows to the right of the DIV when the list is too large. It basically looks like this:
http://i.imgur.com/Tr36X.jpg
Each list item (basically a 60x60 image) is clickable and it leads to a page with the same DIV element and same list items, except one is highlighted a different colour to show it's the current image. What I'm trying to do is get the one that's currently selected (it has a class="active" attribute) to show in the middle of the scrolling DIV, like so:
http://i.imgur.com/YtF1y.jpg
The only way I can think of doing it would be to have a Javascript file included on the page to find what list item has the class="active" attribute, and then scroll along to it using Javascript. Problem with this is, it won't initially be scrolled to the correct position when the page loads, the user will see it "jump" into position when the Javascript loads and gets executed.
Is there a way to do what I want without Javascript? I don't mind a little bit of markup and CSS hackery if need be.
Thanks!
I doubt that this can be solved only with CSS and HTML. Unless you use some other language (like PHP) that can generate you an HTML with changed order of DIVs.
But, I can solve your Javascript "jumping" problem.
You initially show your DIVs with css style="display:none;"
Do the scrolling with JavaScript (and other stuff like changing order of DIVs if needed).
Set css style="display:block;"
i.e. items will show up on the screen already scrolled.
Related
I have a site where I want to be able to show or hide a div based on both user input (clicking/tapping a button) and screen size:
a) If the screen width is greater than a certain size, show the div but allow the user to hide it.
b) If the screen with is less than a certain size, hide the div but allow the user to reveal it.
What I'm struggling with is getting these two requirements to interact properly.
I'm using Foundation 5 and jQuery, so both parts of this are possible - Foundation's "show-for-foo-up" handles initial visibility, and there are numerous jQuery functions that allow a div to be toggled between visible and hidden. But what I can't seem to do is find a way to allow a user click to reveal a div that has initially been hidden by Foundation's media query, or a way to do a pure jQuery toggle (ignoring Foundation) that sets the initial visibility according to screen size.
What makes this more complex is that the div contains a form. So I can't simply repeat it in two different divs and toggle between them, as doing that would either mean duplicate element ids or two different forms, both of which aren't possible in this scenario.
Does anyone have any suggestions? I'm open to either a jQuery solution, a Foundation solution or a pure javascript solution, just so long as it works!
Yes, CBroe's comment put me on the right track and my assumption thereafter was correct. All it needs is to use jQuery to alter the class of the div to add or remove the class which uses a media query. Dunno why I didn't think of this before, really.
I am trying to create a drop down menu. The smaller DIV inside the main DIV that contains an image gallery does not load properly when the website is live (space is there but images do not show up). I am looking for the proper code to make this work properly. This is the code I am using for the drop down of the main DIV with the smaller image gallery DIVs inside.
Read More
The smaller DIVs with the image galleries work fine when the website is live until I change the beginning of the code to . I would like to get the drop down to start off closed and not open when the page is visited.
I am going blind here, but I am assuming that your div does not have height. Give height property to a div and that should solve the problem. Its a common mistake.
Please leave us some code sample next time. Ty.
Don't see your code yet, but here is some possible help.
With showing or hiding HTML elements, like div's, you are dealing with visibility and display. One hides the element altogether and the other takes up the space but does not display the inner elements.
You can read more about display and visibility here:
https://www.lifewire.com/display-none-vs-visibility-hidden-3466884
I'm working on a website using Squarespace. Squarespace's project pages allow you to add images with a title and description, but you don't have any direct access to edit the page. They currently don't offer the ability to make the images clickthroughs, so I'm trying to use JQuery to add that to the images myself.
Here is the website page I'm working on: Prestigious Affairs
Since the div ids change on every load, I'm trying to use the class of the images used for the project page (project-slide-image) to target them, then using .wrap() to add the href. Can someone let me know what I'm doing wrong, because it sort of works, but the whole section pulses and it messes up the title and description on all of the left offset imgaes.
$(function(){
$("img.project-slide-image:eq(0)").wrap('');
$("img.project-slide-image:eq(1)").wrap('');
$("img.project-slide-image:eq(2)").wrap('');
$("img.project-slide-image:eq(3)").wrap('');
$("img.project-slide-image:eq(4)").wrap('');
$("img.project-slide-image:eq(5)").wrap('');
});
It seems to be working, albeit slightly different, here: Code Snippet
So, after quite a bit of messing around, I managed to figure out a solution. I realize this is probably only relevant to Squarespace, but maybe the code would come in handy in some other situation for someone, so I'll go ahead an post it. I ended up using .insertBefore instead of .wrap since that was causing problems.
This is the JQuery I ended up using:
$(function(){
$('<div class="mainLinksOuter"><div class="mainLinksRight"></div></div>').insertBefore($("figure:eq(0)"));
$('<div class="mainLinksOuter"><div class="mainLinksLeft"></div></div>').insertBefore($("figure:eq(1)"));
$('<div class="mainLinksOuter"><div class="mainLinksRight"></div></div>').insertBefore($("figure:eq(2)"));
$('<div class="mainLinksOuter"><div class="mainLinksLeft"></div></div>').insertBefore($("figure:eq(3)"));
$('<div class="mainLinksOuter"><div class="mainLinksRight"></div></div>').insertBefore($("figure:eq(4)"));
$('<div class="mainLinksOuter"><div class="mainLinksLeft"></div></div>').insertBefore($("figure:eq(5)"));
});
So, I ended up inserting the href surrounding a DIV so I could control the size to make sure it would match the image size. I had to do a class for CSS formatting the links that are on the right side of the page and a separate one for the links on the left side in order to keep the inner DIV on top of the images, because of how the Squarespace template works. And then a class for the Outer DIV to add CSS formatting to it.
I then put that inside another DIV to be able to position it where I wanted on the page. Without doing that, I wasn't able to control where the DIV surround by the href ended up, and the site formatting changed for mobile at 768px wide and at 640px wide, so I had to adjust the CSS for those instances.
So, basically, what I end up with is an empty DIV with an href surround it on top of each image, remaining over top of them and adjusting size with the responsive design.
I'm using Harvest Chosen for some dynamic select elements, but I'm running into a problem where if the select element is near the bottom of the page the select list gets cut off. The containing div is set to overflow:hidden, and for some reason changing that to overflow:visible results in a scrollbar showing up inside the container div.
It would be really nice if I could just get the options list to behave like a normal dropdown, and render "upwards" when the bottom would get clipped.
So is there some magic css (or maybe javascript/jquery) that could force the div to show on top of the select element instead of below it, but only when it would be cut off by the containing element?
Or better yet an option in the Harvest Chosen plugin that I missed?
Looks like even in chosen 1.2.0, it still has the same behavior. I'm surprised nobody has added this feature yet. The alternative: use Select2.
I am moving a DIV (from a hidden iFrame) to the top of a page with jQuery, like so:
$(document).ready(function($) {
$('#precontainer').clone().insertBefore(parent.document.querySelectorAll(".maincontainer"));});
Whenever I reload that page, I very briefly see the original page jumping down to make room for the DIV I am inserting. Can this behavior be prevented?
What I'm doing now is give the "maincontainer" a large margin at the top with CSS that is roughly as high as the "precontainer" DIV that is inserted above it, and after that DIV is inserted, I use jQuery to remove the top margin from "maincontainer", so the jumping or flashing effect is less severe. But there has to be a better way right?
I should mention that I only have access to the iFrame that I am using to manipulate the DOM of its parent (which holds "maincontainer". I can not modify the parent, so I have to do everything through the iFrame.
Instead of giving a top-margin to parent page, you can place a "placeholder" div and insert your "precontainer" to this div. This way you shouldn't see a flickering/jumping effect.