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
Related
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 generate a PDF File from a HTML Source. Each Page has a height of 1402px. First solution was, a DIV for each side.Placing Footer and Header was easy then. Problem is: if the content (dynamically generated) doesn't fit the page div, it overlaps the footer and in worst case, destroys the layout. So all the Pages and their content goes into one div, but how do i add 300px of margin, which I need for Footer and Header?
I tried to display my problem in this picture:
The whole white thing is one Div.
The black lines display each page in the Div but they are not in the code.
The green lines display where I need a margin so the red content doesn't overlap, but continues on the second page instead.
Red -> current situation
Blue -> what I need
I can also use Javascript in the document.
Can you help me?
http://i.stack.imgur.com/iMFBb.png
Here is the fiddle of how its solved until now:
https://jsfiddle.net/8yvpavd7/1/
I suggest you ensure that the height of your page is lower than a specific limit. Since you are using absolute sizes and positioning anyway you can easily check that using jquery (example:)
$('#page1').height() / $('#page1').outerHeight()
Since we don't know anything about your datastructure, i can only assume what you need. The following fiddle should explain what i'm talking about https://jsfiddle.net/rkvs5s1z/2/
You could remove parts of your content until it fits the height. You need to store the removed data.
The fiddle does not store the data in the correct direction - it should only demonstrate how this could work
Afterwards you append a new page including your headers and footers.
You might need to repeat these steps if the content of one page is bigger than two pages.
I would also suggest to improve the shown example by not slicing single characters but complete words. If your pages contain html you might also need to check for html code and correct nesting.
We are currently using Dojo to create a mobile map application. We're using Esri for the map service. Everything was working before changing from 3.2 to 3.3. The map works fine but I'm having issues implementing a base map gallery. I've done research for days trying to figure out why my gallery wasn't appearing but I've narrowed down my issue to it actually being the layout of my div tags. On my index.html page I have many div tags for different menu's and what not. I've followed all the div tags to make sure they've all been closed and they have.
So this is what I currently have implemented:
<div id="displayView" data-dojo-type="dojox.mobile.View">
<div data-dojo-type="dojox.mobile.Heading"
data-dojo-props='fixed:"top", label:"Display Options", back:"Menu",
moveTo:"menuView"'>
<div id="galleryDiv"> </div>
</div>
</div>
With this code, the gallery doesn't show up, but if I move the closing div tags above the div id="galleryDiv" then it the gallery will show up, but it shows up on every page of the application because there is no ending div tag. Also, we were trying to implement buttons that would move the base map images in the gallery from left to right but they only work in google chrome. I wasn't sure why it would only work in Chrome and not any other browser.
I originally had a scrollable view in it but it wouldn't show up at all so I changed it to just mobile.view and it worked. Throughout the application it interchanges view and scrollable views, but from what I've researched, it should all work regardless.
After all the research I've done, I'm pretty sure it has to do with the parent/child relationship with the div tags but I'm not sure why it would keep my gallery from showing up on one page and why when I closed the div tags it shows up. However, if I close the div tag then the gallery shows up on EVERY page.
I appreciate any and all help, ideas, and comments! So... Any ideas?...
So what actually ended up being the problem is that the div tag inherited it's own height at 0px. Once we gave it a height, everything showed up just fine. Now why did it give it's own height 0? No idea. Either way, it works now!
so I have multiple divs of the same class below each other. I now want to trigger a "loading comments"-function every time a visitor scrolls to a new div. However, I have no idea how to track jQuery scroll over a div. The comments for each div should only be loaded once, my idea would be to save the current position in a variable and only load comments when the new scroll position is greater than the old one.
Can you please help me out?
EDIT: I created a image that shows what I need to do.
Image: http://i.imgur.com/78EYK.jpg
EDIT 2: SOLVED!
Solved with Viewport (thanks to Royi Namir)
http://www.appelsiini.net/projects/viewport
My code:
load = $(".my-div:in-viewport").attr('id');
load_comments(load);
This is executed every second.
you should read about viewport
Viewport ads couple of extra selectors to jQuery. With these selectors you can check whether element is inside or outside of viewport. To see how it works check the demo.
http://www.appelsiini.net/projects/viewport/3x2.html
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.