Bootstrap modal window behind other page content - javascript

I'm having some difficulties after deploying a locally developed site to a live server. My modal windows are appearing behind other page content on the live server (they work fine on the local version).
I've tried modifying the z-index values and positioning, but neither seems to have an effect.
Here's one of the pages in question

Try moving the modal outside of your list. The modal's z-index isn't working properly when it is nested like that. I usually put my modals at the bottom of my html, right before I load in any scripts.

Related

Wordpress page loading gray boxes randomly while I scroll during page load

On my site as the page is loading I noticed, on both mobile and desktop, that as I scroll the screen gets a gray box. It's very jarring. I also noticed it on my gallery page.
Any idea what's happening or try to fix it? I've never run into this issue on other sites.
What's happening is that you load EVERYTHING in your your <head> tag.
So what happens is that your browser is blocked by getting all of the files first, to be more precise 123 files. Then it tries to read everything and make sense of it. From what I've noticed there must be some jQuery for scrolling as well, which adds even more stress.
Try to put all of the <script> tags at the bottom of your body. This allows browser load them after it reads the styling and content. That's probably the quickest fix.
edit
Also there there are multiple copies of same file loaded and multiple versions of same plugins. They are blocking loading as well.

css link hover and javascript not working when page contains asp.net ajax updatepanel

I have a master page with a menu that rely on a css template and a little javascript for small screens. The menu works really nice for child pages that does not contain an UpdatePanel. But when the page contains an UpdatePanel the menu stops work. My a:hover css is not working and the javascript draw the a button but clicking it have no effect on html. Some basic css is working but seems like the interactive css linke link events and such is broken. This happen direct on laod of the page. I have not even clicked anything inside tha updatepanel
Any suggestion on what might be wrong here?
Turned out to be the wrong path to one of my javascript files :P

Content Does Not Load Until Mouse Hover or Resizing Browser

I'm building a Wordpress site that uses a lot of javascript, and I suspect some of the code is interfering with loading the content. The site sometimes loads fine, but sometimes only the images show up, but the text content does not. It does only when I hover over where the text is supposed to be, or resize the browser. I'd post a code, but I'm not even sure which part to post.
This is a link to the site:
http://paraboladesignstudio.ipage.com/yahaira
I'd appreciate any leads.
I added position: relative and height:100% to the element that didn't show up properly (for example, "aside"), and since then the problem hasn't happened.

Phonegap Page Transitions within one page

I'm creating a Phonegap iOS and Android application. I've got one index.html file where all the pages / tabs are in, each page has it's own div-container. The application is almost finished and now I would like to add a slide-effect when navigating to another page.
My question is, how do I add page transitions within one page that contains several divs?
I have been looking at jQuery Mobile, but this seems to mess up my entire stylesheet. And furthermore, I only need the transitions part of jQuery Mobile, not the entire script. I've found this plugin http://www.fasw.ws/faswwp/non-jquery-page-transitions-lightweight/ but this does not seem to work for one page.
If you're using jQM you should restruct your HTML code so the tags correspond to what the framework needs to make function your transitions.
But I think your problem is with the Ajax calls, when changing from a page to another.

Navigation bar that doesn't reload

I have what is probably a very stupid question. I have been writing a Ruby On Rails app for the last few weeks, using the excellent Bootstrap/Twitter components to avoid me having to do anything artistic.
I noticed on that site, the navigation bar does not appear to ever reload.
http://twitter.github.com/bootstrap/javascript.html
Clicking on the links at the very top (Overview, Scaffolding, etc) causes the page to change, and the URL to change, but the topbar itself does not appear to reload.
I can't detect anything AJAX-y going on that would do this (using Chrome's dev toolbar etc). I can only imagine that it's:
An optical illusion, and it is reloading just it's so fast I can't see it. But then why does it not appear to reload at the same time as the content?
Some undetectable AJAX going on
Some sort of browser caching going on (can you do that for a rendered page element)
Something completely different
Any thoughts most welcome :)
The boostrap site's navbar does seem to be static during reloads but it isn't some clever js that is doing that. There is no hidden content that is being displayed.
What's happening here is a very fast page load. The guys at boostrap moved all their js links and scripts to the bottom of their html so their pages load faster, they even say that in their html. The pages load so much faster that certain elements like the navbar don't seem to change at all. I tried it on my on site and low and behold the static navbar illusion.
So maybe moving your js and scripts to the bottom of your html can help you achieve the same trick.
The entire page (each tab) is loaded, and hidden when the page loads.
The URL is changed using location.hash when the links are clicked (and JavaScript is blocking navigation).
When the hash is changed, the onhashchange event is ran, and the correct div is shown.
Here is an example: http://jsfiddle.net/uFgtS/ (Well, I guess you can't see the url change. Copy the HTML, CSS and JS into a file and run it.)

Categories

Resources