Forums
View unanswered posts | View active topics It is currently Wed Apr 23, 2014 6:02 am



Reply to topic  [ 2 posts ] 
 issues when using css media queries 
Author Message

Joined: Thu Apr 05, 2012 10:50 am
Posts: 1
Post issues when using css media queries
Hello,

I've had a look around at others issues and already tried a few suggestions but to no avail. Wondering if I could get some help?

My issue is basically this:

The site I'm working on is using PIE for rounded corners and the site is responsive; so there are 3 layouts which get triggered at certain sizes via CSS @media queires. The mobile version uses a menu which is hidden using 'display: none', in both the tablet and desktop versions and then set to 'display: block' for the mobile layout. When the window is resized to trigger the mobile layout; firstly the div with the rounded corners is not rendered at all (it's just a div with green background, so I know it's not visible). So you refresh when the window is at this size and then the div shows with the rounded corners.

However when you then resize the browser window back up to see the tablet and desktop version then div is set back to 'display: none' - but it's really screwed up in the sense the div doesn't disappear, it's position changes and it's massive (sometimes filling the screen).

I have tried this approach: viewtopic.php?f=3&t=23

But I'm not sure this will work for me as the element which uses PIE is part of the layout and not trigger by some sort of click event in jquery (?). Perhaps I'm doing something wrong, but this is how I have it in my js file currently which gives me an error in IE:

Code:
$('#quickContact ul.mobile').fireEvent('onmove');


If anyone is able to help out, that would be gratefully appreciated. any thanks in advance too :)


Thu Apr 05, 2012 11:05 am
Profile

Joined: Mon Apr 11, 2011 4:54 pm
Posts: 53
Post Re: issues when using css media queries
jQuery doesn't have a fireEvent() method, it's part of IE's (non-standards) event model. You either want this (gets the first element from selected set):
Code:
$('#quickContact ul.mobile').get(0).fireEvent('onmove');

or this (runs fireEvent() on each selected item):
Code:
$('#quickContact ul.mobile').each(function() { this.fireEvent('onmove'); });


You also want to only run this when you have CSS3PIE loaded:
Code:
if (window.PIE) { ... }


Tue May 15, 2012 8:14 pm
Profile
Display posts from previous:  Sort by  
Reply to topic   [ 2 posts ] 

Who is online

Users browsing this forum: Bing [Bot], Exabot [Bot], Google [Bot] and 6 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group.
Designed by STSoftware for PTF.