PDA

View Full Version : Jquery Nivo Slider Issues


Chapo
05-30-2011, 07:39 AM
Ok.... im using the Nivo Slider for a header in a site, the problem is that when you visit the site the Nivo downloads with all the images downwards for an instant and it looks bad. I will like the site to look good without the Nivo downlaoding the images downwards out of its Div i created for it. How can fix this issue ?

Also i notice that in an older version of firefox, the Nivo activates my flash menu that it is below, the shadow of my buttons turns darker and bigger when changes slides, don't know how to fix this. I saw this in a firefox 3. something in a Mac.

Just curious, is there a way that when my site loads, that the layout appears first than the text ? Looks ugly when text appears before the layout.

www.tuemisora.com (http://www.tuemisora.com)

gentleone
05-30-2011, 07:59 AM
I will like the site to look good without the Nivo downlaoding the images downwards out of its Div i created for it. How can fix this issue ?Add overflow: hidden to the CSS of #Slider or #Nivo-slider or #slider :)
You're div structure looks a bit too much there... see if you can dis a div. I think you can get rid of div #Slider and move the padding rules you have for this div to div #Nivo-slider.

gentleone
05-30-2011, 08:07 AM
Also i notice that in an older version of firefox, the Nivo activates my flash menu that it is below, the shadow of my buttons turns darker and bigger when changes slides, don't know how to fix this. I saw this in a firefox 3. something in a Mac.I'm on 3.6 Mac, but I don't see a shadow change in there. Why do you use Flash for your menu anyway? I assume you're aware that search engines can't crawl the site now. The look and hover effect of this Flash menu can be easily done with CSS alone. No need for Flash to do that.

Chapo
05-30-2011, 02:52 PM
Thanks for the help... i use flash for the menu because if you see closely it has a the lower folded that goes into the other button, i cant do that with css, it will go into the other button. But i will try with spreading the buttons more so i could do it with css and the imagesit will not go into the buttons next to it.

Could you explain me more in how to do the: "Add overflow: hidden to the CSS of #Slider or #Nivo-slider or #slide" ? Still kind of new in coding but i learn fast.

gentleone
05-30-2011, 04:28 PM
In your CSS you have the following:

#Slider {
width:936px;
height:250px;
z-index:1;
padding-top: 122px;
padding-left: 38.5px;
}
#Nivo-Slider {
width:936px;
height:250px;
z-index:1;
}
I'm still trying to understand why you have these paddings in #Slider, because on the page itself I can't see the effect for this. I think you can even get rid of that #Slider div in the CSS and in the HTML... it's of no use. I will have a look with Firebug to see if I'm right.

Anyways... add overflow: hidden to #Nivo-Slider for now like this:

#Nivo-Slider {
width:936px;
height:250px;
overflow: hidden;
}
As you can see I also deleted the z-index you had there, because z-indexes work only on relative, absolute and fixed positioned elements. By default an element has 'position: static' so the z-index on #Nivo-Slider was pointless.
I saw that you have alot more z-indexes in your CSS that are pointless too.... pretty much all of them, so you can delete those too.

Re your menu, I see what you mean but still I believe it's doable with CSS sprites.

Chapo
05-30-2011, 04:57 PM
Yeah, i'm working with the flash menu in this moment to change with css... Just for asking, just because my menu is in flash means now that could be invisible to find, what about the text that is inside of an html file and adwords, that doesn't help ?

(i'm doing the changes for the slider, let you know in a while)

Chapo
05-30-2011, 05:35 PM
Ok... i did the overflow, deleted the #Slider and all the z-indexes and all works great, i had to some change in the padding with the Nivo-Slider because it moved to the left and down, but i fixed it. Thanks, it worked. I will let you know later how i'm doing with the css of the menu. Thanks

gentleone
05-30-2011, 06:01 PM
Great, Chapo! 8-)

Chapo
05-30-2011, 06:08 PM
I like your site, its great. What Slider are you using, is it Jquery, Javascript ? Just thinking in how you manage to slide also when changing links ? how can i build a quote for my own site when i build it ?

The site i'm doing is for a church, what do you think about the design ?

(i feel kind of smart after doing what you said and worked, hehe)

gentleone
05-30-2011, 06:32 PM
Thanks, Chapo! ;) I've used the jQuery ScrollTo plugin for the sliding in combination with the jQuery BBQ plugin to get unique URL's and that the browser back button works.

http://flesler.blogspot.com/2009/05/jqueryscrollto-142-released.html

http://benalman.com/code/projects/jquery-bbq/docs/files/jquery-ba-bbq-js.html

how can i build a quote for my own site when i build it ?Sorry, I don't understand this question.


The site i'm doing is for a church, what do you think about the design?I do like it... fresh color scheme, but the content area is it a bit too texty IMO.

Chapo
05-30-2011, 07:59 PM
Thanks for the links... sorry your quote is a pdf, i once saw a form for clients to fill and gave you and estimate for the site.. but thats not important for now.

The site of the church has a lot of text, but that is not on my power to control, but im trying to make them understand that less is better.

Just for asking, just because my menu is in flash means now that could be invisible to find, what about the text that is inside of an html file and adwords, that doesn't help ?

gentleone
05-30-2011, 08:53 PM
The site of the church has a lot of text, but that is not on my power to control, but im trying to make them understand that less is better.
Sorry, I should have a bit more clear with what I meant. The paragraphs are a bit too wide and can have IMO a lot more padding from the sides - more whitespace - but other then that...
A home page should be not so texty at all... leave the lengthy/boring text for the subpages. The homepage should have a short overview who they are and what they do for the community. Perhaps there are some parts on the website where they really want that visitors go to, so lead them to there with some 'call to actions' on the homepage.

Just for asking, just because my menu is in flash means now that could be invisible to find, what about the text that is inside of an html file and adwords, that doesn't help ?
The menu is not accessible for search engines and screen readers, so not much to crawl there other then the homepage. If you want to stick with the flash menu, then provide at least a link to a sitemap on every page.

Chapo
05-30-2011, 10:10 PM
Ok.. i understand now... well, that is a layout for the subpages not the homepage, the home will be a very short welcome message and a few important links.

About the menu in flash, i know that crawlers will not read the menu so i added a tittle in html text with the same name of the link, so every link has its own html tittle. You could see this tittle just below the menu at the left, its in bold and big size. I thought maybe that could help. In the site you saw it says "Bienvenidos". Does this help ? (still working anyways with the css version of this menu anyways)

About the sitemap link, how exactly should i do it ? I know what it is, but the link has to be in css, does it matter if i add it below at the footer, could it be the same for all the links ?

(sorry, but was is IMO)

gentleone
05-31-2011, 08:23 AM
About the menu in flash, i know that crawlers will not read the menu so i added a tittle in html text with the same name of the link, so every link has its own html tittle. You could see this tittle just below the menu at the left, its in bold and big size. I thought maybe that could help. In the site you saw it says "Bienvenidos". Does this help ?
Using a heading title will not help search engines go to your other pages. That's the problem with Flash menus. There are no anchor links in the html to your other pages. They are in the swf file from your menu and search engines & screen readers can't read swf files, so they won't get further then the index.html page.

About the sitemap link, how exactly should i do it ? I know what it is, but the link has to be in css, does it matter if i add it below at the footer, could it be the same for all the links ?
You just place a link at the top (in your case I'd prefer at the top of the page) that goes to a page such as sitemap.html and on that page you list (as an unordered list) all the links of your pages.
example: http://www.apple.com/sitemap/

(sorry, but was is IMO)
In My Opinion

Chapo
05-31-2011, 12:39 PM
IMO.. thats was ok... hehe ... what i did was that i made a second menu at the bottom while a create a css menu later. take a look.
www.tuemisora.com

I want to create a second Slider effect at the bottom of the site but smaller in size and other images, can i do this in the same html site with Nivo-Slider ?

gentleone
05-31-2011, 01:25 PM
IMO.. thats was ok... hehe ... what i did was that i made a second menu at the bottom while a create a css menu later.
That's also okay to do it like that, but why wrap them all in a h1 tag? They should be wrapped in an unordered list <ul>. I also had a better look at the HTML from your text in the content area where I see that you wrap the paragraphs in h6 tags while they should be wrapped in paragraph tags <p>

Chapo, I think you really should read up about semantics. Use the right tag for the right content. Like you have it now doesn't make sense to screen readers and search engines.
http://www.1stwebdesigner.com/design/html-and-semantics-conjoined-twins-of-the-future-web/

I want to create a second Slider effect at the bottom of the site but smaller in size and other images, can i do this in the same html site with Nivo-Slider ?
Yes you can as long as you give the slider another id and style it according to that ID in your CSS how you want it.

Chapo
05-31-2011, 01:42 PM
Well in the content area i just right and then added the headings and same for the lower menu. It was <p> tagged before, but i think it change when i use the format for Headings for the fonts. So should i just add a <p> before the H1 tags or what can i do about it ?

I will do the menu at the bottom with <ul>

gentleone
05-31-2011, 01:55 PM
do a find and replace in code view.
find: h6
replace: p

Chapo
05-31-2011, 02:04 PM
I changed the tags t <p> but the fonts changes color, size an type. So how do i add the css of the H1 or others H that had the size, color, type and line heights ?

gentleone
05-31-2011, 02:21 PM
change h6 to p in your css too.

Chapo
08-19-2011, 11:33 PM
Hi friend... i saw your site again because i wanted to see the JQuery again of the content. I realize that when the broweser expands or reduces it will affect the JQuery. When the browser expands the JQuery goes below and dispaers and when the browser reduces it gets to the top. Is there a way to keep the content or JQuery always in the middle ?

gentleone
08-20-2011, 06:32 PM
Hey Chapo... I know what you mean and I can solve it if I give the container divs that holding the pages content a 100% height instead of the fixed pixel height it is now and then center the content horizontally. I needed the fixed height back then because of the jQuery active class for the menu which add/remove the class based on window height (in pixels). I could change it now, because there is a better option to do this where I don't need the fixed height, but I'm working on a re-design of my site, so it's going to be soon totally different anyway.

Chapo
08-21-2011, 05:24 AM
Oh ok... i understand.. i really liked that site, thats why i went back to look at it. I tried to use the links you gave me, but its kind of a maze, i got lost. I wanna try that JQuery, looks great.