I created a site with a preloader and when I was done decided I no longer want it, but when I remove the code for it, it won't load past it any longer. It just displays a grey box when attempting to access the website.
There's quite a lot of code to show, but I was just hoping someone may be able to steer me in the right direction by telling me what Div is causing this via inspect element.
If there's any snippets of code I can provide please let me know.
The #main id on the upper most div is causing the problem. Consider using semantic elements like main over generic divs.
Related
First off, I am sorry in advance- anyone who reads this is going to hate me.
So, I am currently finishing a webpage for a client. Things are going decently, except I'm having a bit of an issue with the positioning of an element. There is a little contact box that is supposed to slide in from the side when you click on it. The issue is that I basically have had my hands tied, and I have to use wordpress for this page, and this contact box is a plugin that the original author of this page chose. For some reason- this contact box always ends up behind other elements. I tried setting the z-index in the source code of the plugin by finding the name of the variable that is supposed to hold the instance of the slider- and I could not get anything to work (partially because I havent used jquery in a while, and, this isn't my plugin). I tried using the .zIndex function, but, it kept throwing errors. So, I went to CSS. I got the IDs of the wrapper and the actual box itself, and set their z-index to 100. This did nothing, which has left me stumped. Unfortunately, I can only provide links to the site, and a pastebin of the plugin's code- since the source code for the website is huge... and I also dont actually have access to the server- only the WordPress admin page (which doesnt allow me to edit the source of pages)
http://pastebin.com/NX8AnB16 - pastebin of the plugin source
http://buyinghouseinusa.com/ - the site i am currently trying to finish
If anyone could help me figure out what I need to apply the z-index to to make the stupid contact form stay on top, I would be very greatful. I apologize for the inconvenience of not having the actual code offhand (with the exception of what the browser can show me)
z-index only applies to positioned elements.
Then, in order to make div.dwp-contact-wrapper{z-index: 2000} work, you need
div.dwp-contact-wrapper {
position: relative;
}
I would first like to say that this site has been incredibly useful for me as I have been learning web coding in my spare time. I have decided to register as I have a specific question I would like to ask.
I am working on my new website and a specific test page (www.owenprescott.com/home.html). I have come across a problem that I am hoping someone can help me with. I have a jQuery plugin that creates a hover effect over my thumbnail images and the inline code is causing an issue (jquery.dirinline.js), the function targets my (li) boxes and says this...
$('.da-thumbs > li').hoverdir();
The problem is that I have a couple of white boxes with project information wrapped in (li) tags. I do not want the white boxes to be effected by the above jQuery function. If you visit my site you will see what the issue is when you hover over the white boxes. I would be very greatfull on some input, either I need to alter the jQuery function or remove the (li) tags from the white info boxes however I am unsure how to get them to display correctly either way.
I hope I have not made this question to confusing and thanks in advance for any advice. Also as this will be my template page if you have any suggestions to improve my code feel free to let me know, I know I still need to remove the default Dreamweaver information.
Your JS can be changed to:
$('.da-thumbs > li > a').parent().hoverdir();
And it should work with the HTML as is. The ones you want to exclude would match li>div, but not li>a, so getting the anchors and then selecting their parents will get only the items you need.
So exclude them from the matched set. Use not() to remove them.
$('.da-thumbs > li').not(".someClassInfoThingy").hoverdir();
or check if it those info blocks will never have a link, you can do
$('.da-thumbs > li:has(a)').hoverdir();
Ok so here goes.. I'm totally new to Javascript. I only started on html&css about a month ago. All my htl and css is probably pretty backward and i've got a stack to learn. I'm using two pieces of javascript - one piece loads the nivo slider and the other the hide and show easy tabs:
http://www.kollermedia.at/archive/2007/07/04/easy-tabs-11-free-tab-menu/
Both were fine when I hacked them to hell trying to get them to look the way I wanted. Since i've put them together all hell has broken loose (bit of an exageration) but it may as well have because although they are both working, the page flickers badly on load. I have been researching this and I hear it's called DOM flicker. I know it's due to the hidden divs showing before the script kicks in. I also notice that the increased page height, for the split second (sometimes longer) it takes the content to hide activates the scroll bars and i know this could have an affect. I'm also using background images within the links on mouse over commands.... i didn't know what else to do.
I've read you can add script to only show the content once the script has loaded but I know zero javascript : ) ... yet!
Can somebody please help me fix this? I've read lots of posts around the net but they all put the code with gaps where your supposed to fill in and where it's put is expected to be known. I'm sorry to be such a mong but could someone literally copy and paste my javascript and edit that to show me?
I know it's a lot too ask but i've been trying to fix this all day.
Here's a link showing the problem (when selecting the portfolio links the delay / flicker lasts ages!)
link to the site: http://www.adam-ashton.co.uk/homepage.html
(sorry to be so long winded)
Thanks,
David
Page Flicker can be handled with the help of some css
.hideME {
visibility:hidden;
}
Add this class to the Top Most Element (Mostly a div ) of you html page
And inside the script tag ,
write a window.load function
$(window).load(function() {
$(selector).removeClass('hideMe');
});
this should do the magic :)
Add this one line code at 46th line .. Means first line of window.load
$('.container').removeClass('hideMe');
I've set up the CLeditor on a site I'm working on. Currently I'm setting it up so that as you type and edit within the editor, you can see a live preview of the results just above it, a lot like what you get when typing a StackOverflow question, though much more basic.
It works by simply copying the inner HTML of the iframe contents to another place on the page. However I've run into an annoying issue. When I use the alignment buttons (left, center, right), it adds the attribute align="right", for example, to the selected text. While it works in the editor, it does not work on the page itself, probably because that attribute is pretty much obsolete.
...
I actually figured out how to get around this issue while typing this question. Still, I'll post this question with my solution. Plus I have a relevant question to add to this.
Originally I tried applying the following CSS to the page:
div[align="right"] {
text-align:right!important;
}
This worked for initially loading the data onto the page, but while dynamically changing alignment in the editor, the live preview was not reflecting the changes. I thought at first that this was because the styles were applied at load time only.
Well, that was a brain fart because I know better than that. The real problem was that I was selecting a DIV element and the align attribute isn't necessarily applied to a DIV. Changing div[align="right"] to *[align="right"] works perfectly.
However, even though I found a workaround for this specific issue, I still can't figure out how the cleditor builds the HTML output for the iframe. Where does the align attribute come from in the code and how does it know to put it (and all of the other elements/attributes) into the HTML? If I had a way of manipulating this, I could simply tell it to use inline CSS for the alignment rather than the deprecated align HTML attribute. Please note that I do not wish to enable the cleditor's built-in "useCSS" feature.
Thanks for any information you can share, and please do not downvote this question just because I already solved the initial problem. I want this to be able to help others if they run into the same issue. (I'll also post my answer as an answer).
Applying the following CSS to the live-preview of the page works perfectly:
*[align="right"] {
text-align:right!important;
}
Don't forget to do the same for left and center as well.
So I have a bit of script at the bottom of my page //RETAINER CURRENT that is supposed to hide and show content based on what menu item the user selects in the maincontent area. Unfortunately in IE7 all layers are rendered which means the videos in each layer play simultaneous. I tried .detach, .remove, methods and had no luck and when I saved the items to an array and .empty 'd them I still had no success. What noob mistake am I making?
http://jsbin.com/ahuye4/3
I had the same issue. I was using asp.net so the way I was able to solve this was by using updatepanels and handling the hiding/showing in the code behind with Panels.
I'm not sure what fraemwork/language you are using.
However, I think you might need to call into the flash object and pause/stop the flash videos programmatically.