I'm trying to build a site a using the jQuery Kwicks plugin for the nav, and everything is working great in Chrome (my default browser), but when I open the site in IE, which is what the customer uses, the navigation gets spaces between the menu items and I cant seem to find a solution.
Here is the site:
http://www.webexplosive.com/pb_design
Side note:
I've used this plugin for another website, http://www.webexplosive.com/accu1, and it works and looks correct in every browser...very confused!
Related
I implemented a navigation menu on this website. While the menu works very well in desktop mode, it will not work in mobile viewing. I think there is an issue with connecting to the JavaScript - https://alexandrachel.org/scripts/script.js
The navigation menu should work like this website
How I can get the navigation menu in mobile viewing to work?
Your whole site is not responsive, so either write media query to make it responsive , or else for minimal responsive you can use bootstrap framework which is lightweight and easy to use and for more responsive mobile menus also you can use smart menus . So, its your choice either you write raw custom code or use the resources.
What the script does, is it changes the CSS for the small displays, so the menu is transformed to become a drop-down on handheld devices. However, the current problem is that the script cannot start, because it cannot find jQuery. And thus, on small displays, the CSS is incorrect and your menu is not visible (however it is there, and functional).
If you load your webpage over HTTPS (as in https://alexandrachel.org/), then the scripts and CSS files should also be requested via a secure protocol.
Try changing a request to jQuery to (note https://):
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
And you can remove the second request of version 1.10.2 from googleapis.com, since you are already pulling the latest version from jquery.com.
Errors in loading your website ref: Chrome Dev Tools
jQuery can't be found plus a lot of your content is being served over http whereas the main website loads on https so just fix those requests and import jQuery.
And this should work
Ref: to the attached image for the errors
Am building mobile app (phonegap) using jquery as a js library. Want to add slide menu that open on either tapping (in corner) or by sliding finger across. I could only find articles on jquery mobile but I dont want to use JQM cause I find all the default styles (theme, data-role ...) messy as I have to overwrite styles with my own CSS.
Is there any library just for sliding menu that open on sliding on touch devices other than JQM?
There are a various open source projects for this out there. Just take Google for a search on "mobile slide menu" and you'll easily find dozens.
I personally prefer Snap.js and use it on multiple apps in production. Its not that actively in development, but it does the job nonetheless.
One of the library allowing to add side menu is AppFramework. The documentation for adding side menu is here: http://app-framework-software.intel.com/documentation.php#afui/afui_side but I would recommend to visit follow page: https://software.intel.com/en-us/html5/articles/templates-to-get-started-with-html5-mobile-app-development it contains demo and code for several features of AppFramework.
Long time user/lurker, but this is my first time asking a question. Here goes...
The sidr menu on http://jonathanfanndesign.com/lowsleep/ works on my home laptop on IE, works on my iPhone, works on my work computer in Chrome, and works on my wife's Mac, but simply gives me http://jonathanfanndesign.com/lowsleep/#sidr as the result with no menu being pulled out on my home laptop (HP running Windows 8).
The Developer area returns the following errors:
GET http://jonathanfanndesign.com/lowsleep/dist/js/slider.js 404 (Not Found) (index):128
Uncaught ReferenceError: MM_preloadImages is not defined (index):29
event.returnValue is deprecated. Please use the standard event.preventDefault() instead.
The slider javascript error is there because it is not being used anymore and I need to remove that from my code when I get to work tomorrow, so I didn't upload it to my site, but this shouldn't affect the sidr menu. Could it be the deprecated event.returnValue? Why would this not work only on ONE computer? I'm sort of freaking out about this because I don't want my sites not working on random people's computers with me not knowing about it.
Thank you for any input you can offer.
I was having this exact same issue that you were having. My Sidr menu was working in just about every browser except Google Chrome on PC (but Chrome on Mac was fine). I also noticed I was having issues opening the menu on mobile also. I would have to very delicately press the menu button for it to work.
I found a solution to both issues here:
https://github.com/artberri/sidr/issues/97
Essentially the solution is basically putting the menu icon within a jQuery click function below your original Sidr function call:
jQuery("#id_of_my_btn").click(function() {
jQuery.sidr('toggle', 'name_of_the_sidr_panel');
});
You'll notice that I used "jQuery" instead of "$". That could also be a possible issue, especially if you have a CMS like WordPress installed with plugins that conflict with the "$". I have had to use "jQuery" instead of "$" on most of my WordPress sites.
Another thing to note is that I also had to put all of my Sidr code into the footer of my website, due to loading issues, which could also be another possible issue.
http://developer.android.com/design/building-blocks/tabs.html#scrollable
Has anyone achieved this effect in a web app using JavaScript (or even jQuery)?
Got the pages sliding nicely (obviously that's the easy part), but getting the page titles to animate correctly looks like it could be painful!
May just go with the fixed tab layout but if anyone has any tips or examples, I would be very grateful...
There's a CSS which makes your page look like Android:
https://github.com/proimage/Android-4-ICS-CSS
There's a more advanced project with some JS:
http://jaunesarmiento.me/fries/index.html
And this is the way to do page swiping:
http://stereobit.github.io/dragend/ (also works on the PC)
http://swipejs.com/ (only works on touch device)
http://eightmedia.github.io/hammer.js/ (only triggers the event, doen't swipe the page)
With these you can have multiple pages in one HTML file:
http://handlebarsjs.com/
https://github.com/janl/mustache.js
http://underscorejs.org/
http://embeddedjs.com/
http://jade-lang.com/
https://github.com/blueimp/JavaScript-Templates
I'm working myself to combine some of these libs into a usable application. Hope it helps. This is also a note to myself.
I have a small web application that uses twitter bootstrap tabs. Recently it has stopped working.
In investigating this, it appears the basic tabs on bootstraps own demo page don't work either. See: http://twitter.github.com/bootstrap/components.html#navs
I've tested this in Firefox, Chrome and IE. On multiple machines. Bootstrap tabs are broken across the board.
Any ideas what's going on?
Thanks
The Tabs on the page you mention are just the visual elements; they don't have any logic to hide and display alternative tab content. For that you need javascript as illustrated on the Javascript plugins page.