wickywills

Not sure I totally understand what you're saying. The functions in my script are not concrete in the way that you describe, and are being told to run on browser resize as well as load. And it is an issue due to mobile/tablet orientation. If you were start at a landscape then flip to a portrait layout (obviously depending on your device size), the tabs would not work - this is an important issue that needed to be solved. Either way, it has been solved using the following: $(function(){ var winIsSmall; $(window).on('load resize', footerAccordion ); function footerAccordion() { winIsSmall = window.innerWidth < 601; $('.col .mobslider').toggle(!winIsSmall); } $('.col').find('h2').click(function () { if(winIsSmall){ $(this).parent().find('.mobslider').stop().slideToggle(); } }); }); Updated original link to others can see.

Hello, I am having a bit of trouble getting an accordion menu to work. Basically, I would like a 4 column layout which then becomes an accordion menu when the browser is resized to less than 600px. It ALMOST works, for example if you visit the size when your browser is less than 600px already, then it works. However if you start at desktop size then resize the browser down to below 600px and try and click on the headers, it doesn't work for some reason. Not getting any errors, just not working (content areas don't expand). I've made a quick demo of what I am trying to do, and it should be fairly simple, I just can't get it to work (lack of sleep probably doesn't help)! Link to demo Thanks in advance for any help James

This is the sort of thing I am looking for, but with a 'hover' instead of the click/drag as in this example

Almost, though what I'm looking for is to tilt a div depending on the part of that div the mouse is on. I already know how to do 3D transitions in CSS3, they are easy. What I'm looking for is for the div to tilt depending on where the mouse cursor is located on that div. I have seen this done a few times, but just trying to find an example again. Will try and do a quick video that illustrates what I'm on about. My guess is that it would involve JavaScript to calculate the mouse position and tilt the div by a certain amount in that direction. I may be able to write this from scratch, but it would probably take a while to do, so I am just trying to find an example that I can reverse engineer. Sorry if I'm not explaining myself well.

Please see screenshot for the effect I am after:

Unfortunantely that is not what I am after - as mentioned, I need the area that is rolled over to tilt away (z-axis only) from the mouse. Sort of like the iPhone game where you have to tilt the phone to get a ball in the whole (guide it around a maze etc). All I want is for the div to tilt depending on which area is rolled over. I will make a few screenshots showing what I'm after, as I don't think I'm explaining things very well..

Hello, I would like to have a div, that when rolled over on different areas of that div, it would tilt away from the area that is rolled over. For example, if I were to roll over the top-right corner of the div, that corner would tilt away from the user (z-axis), if that makes sense? I used to see this done in Flash, unfortunately I can't remember the example. I think I have seen a CSS3 example of this, but can't remember how it was done. Does anyone know how to do this? I can provide a few Photoshop mock-ups if that helps explain things? Thanks in advance James

Hello, I am working on my new website, and I have a large HTML5 video that I want to run once, then loop the last 0.5 (roughly!) seconds (or the last few frames basically). I have tried using "currentFrame" and then ".play()" to control the video, but there is a 1 second delay before the video is played again - ideally I want this seemless. I could use 2 <video> tags and overlay them, then just hide/show them when the first one is finished, but surely there has to be a cleaner way of doing this? Anyone have any ideas? Many thanks James

Sorry, me being an idiot! Just set hierarchical=1

Hi, I am creating a sidebar for a client who would like to display post categories in the following way: Category 1 Category 2 - Sub category 1 - Sub category 2 - Sub category 3 Category 3 Category 4 Category 5 Basically, each parent category would have child categories that would be hidden/shown depending on the category selected. I can see on the codex how to display categories easily enough, but I can't see how I can nest them in this manner. This looks like a standard thing to do, but I'm just not sure how I should tackle this. Any ideas anyone? James

Hello, I am using Flexslider, and am trying to load a different set of images for desktop and mobile (blame the designer!!). It almost works, however when navigating between slides (after resizing your browser window), the slides just seem to go off to the far left never to be seen again. I have created a test page here. When you go to the page you should see the desktop banner (with 2 navigation buttons in bottom left of browser window. If you now resize your browser to below around 600px, you should see the aspect of the images change to a more square version. This is when the mobile images are loaded in place of the desktop ones. However if you now try and navigate using the bottom left buttons, the images just swipe off to the left and it breaks the slider! Has anyone run into this issue before or know how to solve it? All I want to do is swap out the images for a different set of images when the browser window drops below a certain size. Should be fairly simple? Thanks for any help James

Thanks for the reply - I moved the CSS to the head as suggested (my mistake!), though I still get the really small version in Chrome. Very odd that it works in IE - really can't think what this can be - any ideas?

Really? Does it appear really small in your browser, like this: Am I missing something obvious (most likely!)??

Hello, I am trying to build an infinite, 100% width carousel, like the one seen on the BBC homepage (here). After a bit of digging around, it appears that they are using their own library called "Glow" (here) to do this, however I am unable to get any of the examples to work locally despite copy/pasting their code. My attempt can be found here. Can anyone see why my version is breaking? Help greatly appreciated! Thanks James

I have since purchased a new monitor and all is fine.