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!
Related
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
Im developing a website for my boss and have been noticing weird behavior, after looking closer i corrected my div tags.
Now when I examine my webPage it shows my imageGallery div borders Overlapping my content Div, It still displays most content properly but is confusing me greatly and i want to solve it before moving on.
http://2286bowmanroad.com/
ctrl+shift+i on chrome under elements if you highlight ImageGallery you will see it is also behind content but must be bellow.
Lots of Googling has been tried and trial and error with positioning and fixing div tags this is the only set of divs causing issue and i cant tell why.
I want my image gallery div to be completely bellow the content div but above the footer
I think it is because you gave float: left to the class content. I am sure you gave it for some reason, but moment you remove it, it'll be fine.
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 creating a single page web app using AngularJs and I am having trouble with showing information as if they were in different panels.
So basically each panel contains text and photos, basic information slides. I am currently showing and hiding these using a left and right arrow.
But when I go from one panel to the next, the next div is scrolled to the bottom of the div.
On the click of the next arrow, I also need the next div to be at the top no matter what.
Any help would be appreciated.
As #ferTo says, you should provide some code for us to comment on. Assuming you are using ui-router (which I have no idea in practise) then you will want to turn off autoscroll
<div ui-view autoscroll="false"></div>
Im trying to recreate the script that rdio (http://rdio.com) has created for their player footer. when you click on footer, a panel slides up nicely and to reveal more content. another example is by teehan lax; the top dropdown http://www.teehanlax.com/ but theirs doesn't support firefox properly.
I came across this snippet, http://www.dynamicdrive.com/dynamicindex17/dddropdownpanel.htm
But its not clean as rdio's or teehan.
any thoughts on library they might using?
We're just using basic CSS transitions, and adding and removing classes. The z-index of the bottom bar is set such that it appears in front of everything else, and the class changes control how the content is changed.
You can accomplish the same height changes with jQuery quite easily, as described here: https://stackoverflow.com/a/4965097/1309238