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!
Related
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.
I am using the Twitter Bootstrat Freelance theme (http://startbootstrap.com/templates/freelancer/) and have incorporated Own Carousel.js (http://www.owlcarousel.owlgraphic.com/demos/demos.html).
All is working well apart from whenever I click an image to view it in a modal window, it appears the wrong size - until I resize my browser window, or refresh the page, or eg press f12. It then seems to 'fix itself'.
Not sure if this is a js conflict issue or I am doing something silly (I am quite new to js). I have looked at the console and can't see any errors, I have also tried different versions of jquery and bootstrap however no difference.
I have created a jsfiddle here http://jsfiddle.net/johnny_s/34L6t/2/
If you view the jsfiddle, try click an image and once it opens in the modal window, resize the screen slightly and you will see what I mean. It somehow suddenly fixes itself.
I would appreciate any help or direction on this issue, as I am trying to create a personal project which needs to be finished quite soon :s
Need to include the following external js files.
Thanks to #Sebsemillia for the help
owl.autorefresh.js
owl.autoplay.js
I'm using a fancybox demo (http://fancyapps.com/fancybox/) on my personal site. Everything works perfectly when I'm testing locally, but once I uploaded the site to be live, the fancybox feature is not working and instead brings you to a new page view the image.
This is the site I am referring to: http://colettemolleur.com/. Click on the image to see the issue I'm having. Also, I'm not forgetting to upload any of the js files, so I don't know why this is happening.
Any thoughts?
Thanks!
Colette
Check your path for Bootstrap, main.js and query.mousewheel-3.0.6.pack.js which return 404 not found on your page. I suspect the path are incorrectly setted.
In chrome, use the developer tools (using F12 or right click+ inspect element) to check for error on the page. I get 4 when opening your page.
Okay guys I have a website that has a lights off for videos source code: http://www.megaptery.com/allofthelights/
An organic tabs for videos using Jquery
and a 2buttons which onclick it changes the CSS of the whole page you know it's kinda like a theme for the page
Here is an example of one of my page:
http://myanimesekai.com/Watch/Noucome-Episode-9
okay all of them works perfectly fine on my laptop all of them IE, Mozilla and the OLD Google Chrome.
But Then I tried it on my Brothers Laptop BUT his Google Chrome is the latest Google Chrome the Google Chrome where the scrollbar changed. The problem is that the Lights off feature is malfunctioning it doesn't turn off the video only. But the Organic Tabs and The 2buttons works perfectly fine. So I tried it on an internet Cafe and this is where I was really frustrated their Google Chrome is also updated and then both 3 of them were malfunctioning then after a while I tried them on Mozilla and all of them worked perfectly fine and so I have an Idea maybe it's becaused it took time for the Jquery and my Javascript to load which is why all 3 of them were malfunctioning.
so my question is is there a way for me to make my page load the jquery and javascript 1st? or am I missing something that the new Google Chrome requires? this is really frustrating me
oh BTW the 2buttons that changes the CSS are the B and M squares Below the facebook page
There are so many errors on this page (http://myanimesekai.com/Watch/Noucome-Episode-9) that any one error can cause the page not to work.
You need to clean up your code quite a bit:
<script src="http://myanimesekai.com/javascript.js"></script>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script src="http://myanimesekai.com/organictabs.jquery.js"></script>
You are calling jQuery in your javascript.js file. The jQuery library has not been declared before your scripts. You need to restructure your code to (you only need one version of jQuery):
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script src="http://myanimesekai.com/javascript.js"></script>
<script src="http://myanimesekai.com/organictabs.jquery.js"></script>
This will fix some errors. I suggest that you look at the console for further errors and fix them.
Iam working on a website and I dont have any clue why the tabs doesnt work when I upload the website. Because when I view the website normal it does work perfectly.
By the way: The tabs are working with a jquery script.
This is the website URL: http://bmvisuals.poshh.nl/
Greetings.
Edit: I mean some of the tabs doesnt appear.
Your About me tab does not show up because your server is case sensitive.
Aboutme.jpg != Aboutme.JPG
You should check out CSS Sprites. There is a flicker when you hover over a tab (the first time) because the browser has to load the hover image. With CSS Sprites an image map is used and all the images are loaded at once so the hover is seamless.
As an aside, your site does not scroll vertically. When my window is smaller than your site, the bottom gets cut off and there is no way for me to see it.
Firstly, nice site. Secondly your tabs are totally borked for me. I am using Linux Ubuntu and Firefox 3. Not sure about the fix though. Just thought I would mention it.
Using Firebug, I see some resources give a 404 error:
http://bmvisuals.poshh.nl/Scripts/Lightbox/images/lightbox-ico-loading.gif
http://bmvisuals.poshh.nl/Scripts/Images/PhotoGallery/PhotoGalleryContainerBackground.png
http://bmvisuals.poshh.nl/Images/Tabs/Aboutme.jpg
http://bmvisuals.poshh.nl/Images/Tabs/HomeActive.png
On a side note, the page doesn't work if javascript is disabled. I would suggest using the noscript tag to show a message saying javascript is required. The other option is to make the page work without javascript.