CSS/JS collapsible div working in JSFiddle, not in browser - javascript

I am having a bit of a problem here.
I am trying to make a collapsible div (think a folder tree-like thing) using the code at jsfiddle.net/cpkDg/
The code is working fine there, but when I try to integrate it into my site (a webapp) it's not working - http://dev.brandeer.ro/consins/standard/home.php
I am using Pushy (christopheryee.ca/pushy/) for the side menu, and I suspect that this is the culprit, but I have no idea how to test it in JSFiddle (copy-pasting the script - Modernizr et al) in JSFiddle didn't work).
I am only interested in this working on Chrome, since it is a webapp which will run only in Android WebView. In the near future I hope to implement it as a native app.
Do you have any idea how I could solve this ? I have been looking for a few days on a pure css version of a collapsible menu but it seems that everyone prefers JavaScript/jQuery implementations.

Related

Skel js collapsed nav not working iOS

I'm using Skel.js and Skel-layers.js on a website I'm working on, I'm working on a modified HTML5Up template: http://html5up.net/escape-velocity
The problem I'm facing is that the collapsable navigation doesn't work on iOS (I've tried both Safari and Chrome). The collapsable nav works in every other web browser and mobile device. The original template works on iOS.
The HTML structure, and JS are the same. All the alterations within the CSS have no impact that I have found. I've been removing elements in the style-mobile.css and testing the alterations in the iOS Emulator on my Macbook.
The website I'm working on is http://havenlea-farms.co.uk/
When the collapsed nav icon is clicked, there is no response in iOS.
Has anyone got any ideas on what the cause could be? I'm aware that the question structure isn't great.
After much frustration I've found the problem. After manually unloading my stylesheets and javascript files, the problem was with an Arc Text lib I was using. https://github.com/codrops/Arctext
Once I removed the reference to the lib the navigation worked on iOS. I'll report this as a issue on GitHub for both Skel and Arctext.

Mobile collapse bootstrap not working in Chrome

I'm fairly competent with HTML and am working with Bootstrap for the first time, but I can't seem to get the mobile collapsible menu working on Chrome on the desktop (and presumably some other browsers).
Safari on iOS 7 with default mobile responsiveness shows the menu fine when clicked, but nothing happens when you click it in Chrome on the PC when the browser is resized to a mobile-like width.
Sorry if it has been said before - just went through the code and couldn't really understand why it wasn't working! :(
First time on SO and can't figure out how to put my HTML in here, so here it is.
Thanks peeps :)
You have linked jQuery from Google CDN and hosting your website from Dropbox. Dropbox does not allow external linking of script and font files.
So you are getting an error on your page:
Host the jQuery file on your website and link (internal linking). Like for example put jQuery in JS folder and link:
<script src="js/jquery.min.js"></script>
Problem will be gone. Hope this helps!

Need help debugging - IE not displaying jquery background slider on website

I've had this problem for over a month and client isn't paying me until it's fixed.
The website is: http://www.cardwells.co.nz
I'm using WordPress as the CMS with a template and some custom work.
The template comes with a slider background inbuilt which works in all browsers except IE.
I'm also using http://www.smoothdivscroll.com/clickableLogoParade.html for the scroller at the bottom.
Basically I have no clue WHY it's not working in IE - everything seems like it should be working. I've run the site through w3 checker and used that IE specific CSS files - but no dice.
Please help.
There was no real solution - really =\ I disabled, removed, reuploaded and reenabled the template. Either a file was a miss or a DB connection error somewhere along the line. So stupid.

RightJS Lightbox Plugin Not Working In IE

I am using the RightJS Lightbox plugin for a Lightbox to show inline HTML data. It works perfectly in FF and Chrome but alas IE is a no-go. I had it working yesterday for a short time and have tried to retrace my steps to no avail.
Here is a link the the applicable code: http://jsfiddle.net/jmarcello/QuwfE/. The full version can also be viewed here: http://www.buenolisto.com/alma
A simple elegant fix would be greatly appreciated. Or if anyone has another lightweight solution that provides a light box supporting inline HTML that would be great.
By lightweight I guess I mean with minimal files and preferably without having to connect in to yet another style sheet which is why I like the RightJS solution.
Thanks in advance...
Works perfectly http://jsfiddle.net/YHwyr/, you seems like have broken links, it didn't download right.js from your site

jQuery animations not working on iPhone

I'm using jQuery on a client's vCard site - http://chrismward.com/beta - to switch between pages.
It all works great on the computer, but when I try on my iPhone: no dice.
I'm using jQuery 4.0 and here is the only js file I'm using on the site (other than jQuery from the Google CDN) - http://chrismward.com/beta/resource/js/main.js
If anyone can help me, I'd greatly appreciate it.
Thanks,
-Giles
Regular JavaScript animations (using setTimeout/setInterval) don't work very well in Mobile Safari; you need to use CSS Animations to get decent results. You might want to try creating an iPhone-optimised version of the site using jQTouch (which uses CSS animations).
They appear to work fine in the iPhone Simulator. Which means, if they are too slow on an iPhone, they are just too slow. Use CSS animations like Steve Harrison suggests. You probably want the -webkit-transition property. Here's an example you can try.

Categories

Resources