Link to home
Start Free TrialLog in
Avatar of dzash2000
dzash2000Flag for United States of America

asked on

jquery hide/show not working in responsive site

Hi -
 I'm starting to build my first "responsive" website where the layout of the page changes for different screen sizes - and also changes as the desktop browser window size is changed.

In the widest and medium viewport layouts there are about 4 paragraphs of text.  But in the smallest viewport only the first paragraph is shown and the rest of the text is "hidden" inside a div "hide-and-show".  I use a jquery in the HTML, and CSS "display.none" on the small viewport stylesheet to keep that text hidden until the user clicks a link.

The hiding of the text and the link to show more text should only appear in the smallest viewport.  However - the text is also hidden in the wide and medium viewports.

I need help figuring out why the text is hiding in the viewports where it should be showing.

thanks
d2
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

Code ?
Avatar of dzash2000

ASKER

Hi -
I'm not sure exactly where the problem is - css or implementation of JS in the HTML.  That's why I provided the link to the actual site.:

http://newpixelcity.com/ITALY/

I'm pretty sure it's not the actual jQuery.js code because I never even touch that.  I just link to it.  But there are a few lines in the HTML.  
<script language="javascript" type="text/javascript">
$(document).ready(function() {

	$("#hidr").hide();

	$("#showr").click(function () {
			$("#hidr").show();
			$("#showr").hide();			
			$(".hide-and-show").slideToggle("slow", function () {
							  });
		});
			
		
	$("#hidr").click(function () {
			$("#showr").show();
			$("#hidr").hide();			
			$(".hide-and-show").slideToggle(1000);
		});

});
</script>

Open in new window



And then in the body of the HTML there is the div that's giving me the problem:
 <div class="hide-and-show">

Open in new window


Then in the CSS for the small viewport (there are 4 stylesheets) - "start-over-sm.css" I have the declaration:
.hide-and-show {
   display:none;
   }

To hide the div.  But for some reason it's hidden for the other viewport sizes.

I hope that is enough information.
Apologies on my screen the link in your original post is not obvious.

Where in your code are you checking screen size and hiding / showing the (currently) hidden paragraphs?

The way you have it now is that the paragraph will always be hidden regardless of the width of the screen.

Also your hide-and-show-triggers div is hidden so line 34 of start-over-wide.css.

Finally the JQuery is only for responding to the hide and show clicks but does not do anything for checking the width of the page - you need to be initialising based on $(window).width and $(window).resize - checking the widths there and then either hiding or showing the content you require.

Before going into the code for the above - I would like to understand why you thought the code would work as you expected - I might be missing something.
SOLUTION
Avatar of mcnute
mcnute
Flag of Germany image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
JulianH -
thanks for the response.  I thought it would work because it "seemed" to work for about a day!  I had moved on to other aspects and when I came back, the text in question was gone all the time.  My thinking was - since the 3 style sheets dictated changes in layouts based upon changes in widths - that the css display property would be adequate to the task.  I only know enough javascript to copy and paste.  I used what I know.
mcnute - Thanks for the reply but I need some clarification please.

When you say -
Just set it to display:block in the beginning and it will be visible except for the very small layout for the small window size.

I think you are  saying that I should use:
.hide-and-show {
   display:block;
   }

Open in new window


... in the main, wide and med.css but not on sm.css.

When I do this I do not get the desired result.

Please clarify your instruction.
ASKER CERTIFIED SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
julianH - Thanks for the reply.

"none" is not a value for visibility so I used "hidden".  This doesn't have the desired effect because - even though the paragraphs are hidden - the space the paragraphs take up is still blank.  This pushes the stuff under the paragraphs out of view.

Then I switched to the "competing" method.  I put display:block where I wanted the paragraphs and put display:none on the small sheet.  So I used only one property to effect the appearance and not competing properties.  

This worked.

Thanks
d2


 ( I'm working with the files offline now - I don't have ftp access here.)
I rated the julian solution "B" because - while it wasnt completely accurate - the additional explanation julianH gave led me to the correct solution.  I awarded mcnute some points because even though it was the right solution - I didn't recognize it as such until I worked thru julianH's.  As I commented, I needed clarification on mcnute's. That clarification came from working with julianH.
If you don't want the space to be taken up then use

display: none

dispaly block

To show and hide - that way it does not create the space for the element.