I have a toggle dropdown menu button that appears on smaller resolutions/devices, but for some reason it isnt working. When clicked, nothing appears/shows.
Most likely there is something missing (JS function that makes it open maybe). Copying entire code doesn't make too much sense to me, so I am just using some of it:
http://goo.gl/TNixQe
UPDATE
True about responsive design. Now I noticed it (but did you say about it in your question? nope.).
When I tried to resize window firebug had found this error:
This error appears in js_func.js file in 9 row. Are you sure you link libraries correctly? JS can't find uniform() function.
Possibly this error is appearing, because all your instructions are in simple function. Try to add them to onload handler. Possibly browser try to load this instructions before uniform library had been loaded.
I meant this:
$(document).ready(function()
{
// use `uniform()` function on elements
}
OLD ANSWER
It is simple drop-down menu, based on lists. It is working throw hover handlers.
You can't do 'hover' on your mobile device. You can tap on screen only.
If you want users with gadgets use your site, you have to create menu espesially for gadgets.
Small trick, which helped me (because I am lazy :)) is to assign javascript:void(0); to 1 level buttons hrefs. This worked on SGS2 and Xperia Z1, but I am not sure it will work everywhere. With that trick, a man will tap on menu button and drop-down menu will appear.
You have a javascript error on line 9 of js_func.js:
Uncaught TypeError: Object [object Object] has no method 'uniform'
This will be causing any code below it not to be run.
Could it be a missing plugin on the mobile version?
A quick google suggests that the issue is with your jquery verison, they say to downgrade to 1.8.3.
In your case you are using 1.8.2, so try upgrade to 1.8.3.
Related
I need a little help from you if you are familiar with css, php or javascript.
I needed a grid display component for my site, and after searching I found a suitable one and installed it. Now the problem is that after activating the module related to this component on any page, the menu at the top of my site stops working. It means that there is an interference between the grid component and the menu. If I disable the grid module, the menu works again without any problem.
Please see for yourself in the link below.
http://test6.harfrooz.com/117-more/18376-top-20-ufo-sightings
Currently, the grid module is active under articles,so nothing happens if you click on the search button or the corresponding button on the sidebar menu. This issue occurs only in mobile and tablet display modes. So reduce the browser size to see what I mean.
The question is, what should I do to solve the problem? I don't think it should be a very complicated problem?
Also, when the grid module is active, the following error can be seen on the Google Inspect page.
mootools-core.js?d25b1e28c6a2a29d5e390c182349c46d:136 Uncaught TypeError: Cannot read properties of undefined (reading 'x')
at getWidth (mootools-core.js?d25b1e28c6a2a29d5e390c182349c46d:136:134)
at Object.check (script.js:137:23)
at Object.initialize (script.js:58:14)
at HTMLDocument.<anonymous> (script.js:442:14)
at n (jquery-1.7.1.min.js:2:14784)
at Object.fireWith (jquery-1.7.1.min.js:2:15553)
at Function.ready (jquery-1.7.1.min.js:2:9773)
at HTMLDocument.B (jquery-1.7.1.min.js:2:14348)
Please see this image for better understanding
I checked the URL. The reason [Menu] and [Search Box] not working (in mobile view) is JS error you saw in console. If you fix that, they will be fixed too.
I can see that your home page is OK currently:
http://test6.harfrooz.com
You can see that the grid is not loading anymore in article view but in your demo it is loading yet and I guess that's the reason (perhaps it occurred after disabling some menus?).
So you should disable grid in article view somehow! For first try check the template manager and see how many styles are there? Maybe you need to set different style for homepage and other pages. specific themes usually selected through menu manager.
I am creating a CRM sort of application. There are multiple tags at the top of page. Clicking on the tags, should bring up, a chrome dev tools like panel(Ctrl+Shift+I) which will basically contain a table.
I searched the web, but could not find how to go about creating one. Neiter jQueryUI has any element of that sort, nor the bootstrap library from twitter has something like that.
In case you could throw in some pointers, along those lines. It will be helpful for me.
Thanks!
I am using twitter bootstrap, so that will be helpful.
PS : You can press Ctrl+Shift+I in chrome, to generate the panel, I am talking about.
This is a fairly broad question that potentially has many solutions depending on your exact needs, scenario and skillset. Also, it's always best to post an attempt at the problem to get a better response.
One solution would be to simply hide (display: none;) a sticky div that is attached to the bottom of the window. To show/hide you can use js and either a button/link or try something like http://plugins.jquery.com/project/hotkeys if you want to activate it with a keyboard shortcut.
I am trying to use a third-party jQuery Carousel plugin in a project at work (don't know which plugin it is though). The problem is that when I use multiple instances of the same plugin on the same page only one of the instances updates. I think this issue is with how my instances are setup. I have constructed a jsFiddle at here.
The carousel is attached by the .carousel class and all instances are initiated by the method shown below:
// Enable carousel
$.each($('.carousel'), function (i) {
$(this).carousel(this.id);
});
Unlike in my local code, in the JsFiddle only one of the carousels works. Any help would be very much appreciated.
Firstly there is an error when your js runs. If you look in your browser dev tools of choice you should see
TypeError: properties.slider.swipe is not a function
Once commented out the js will run correctly but if you click any of the next and previous buttons only the bottom slider will run. This is because they use the same instance of the var properties.
I would suggest looking at creating a jQuery widget with your existing code, it is fairly straight forward to do. By doing this you can have several instances of the same widget running on a page together.
Coding your first jQuery ui plugin
Rather than fix the entire plug-in, it's much easier to tell you that after the plug-in is initialized, the plug-in code breaks when it attempts to add touch events.
// Add touch events
properties.slider.swipe(function (event) {
if (event.swipeDirection == 'left') {
methods.next();
} else if (event.swipeDirection == 'right') {
methods.previous();
}
});
// Throws: Uncaught TypeError: Object [object Object] has no method 'swipe'
Comment out the plug-in code's touch events, and it no longer breaks.
However, because of how the plug-in is created, it can only handle one carousel at a time since it overwrites the last one that was defined.
Try a different, widely-used, and responsive JS slider that supports touch events.
Hi i have created Carousel without using any third party plugin.If you want please refer
Reference Link
Hope its helps you.
I have just started using ShareThis Widget to help handle social media integration with one of our sites. While the functionality is great, I feel I lose a lot of the capabilities I have if I were to code each item by hand, such as the ability to control the size of the windows opened by clicking a 'share' functionality.
While their site shows basic functions you can add to the buttons (url, etc) I am looking to customize the feel such that when a button is clicked, I can control the size of that window or even possibly open in an existing colorbox snippet.
Has anybody had luck with this before? When I try to control via javascript function it just seems to get overwritten or ignored.
You'd need to unbind their events and handle them all yourself. It probably isn't a good idea, as your code will be at the mercy of their implementation.
I am not sure if your question is resolved, but you will need to add as following inside JS.
popup: 'true'
The same is on their Support Page
This is my third jquery script, and parts of this have been taken from other scripts. I'm trying to implement the following feature:
I've spent 4 hours trying to figure out how to get the submenu to display left if the browser window is too small. Currently it only works on large resolutions too. I found one script on here, but it only detected it on page load. This script used offset(), and this caused my marquee to fail on firefox. I'd like to avoid this if possible.
The menu is running here: http://www.mantisclan.com/beta/dropdown/
I'd like to use .addClass and .removeClass to set the left: position of the submenu.
Thanks for the help, I will learn from this.
So it seems to work here: http://jsfiddle.net/JLUqH/2/. However I don't like this effect because it is quite impossible to control the menu, it pops up, collapses very fast.
Try changing the event from hover to click.
There are a lot of jQuery plugins that handle drop down menu creation for you: 38 jQuery And CSS Drop Down Multi Level Menu Solutions