I would like to show title of an image after "click" also on mobile devices.
So far I got this, however I don't know how to display the tooltip of the image.
$(document).ready(function(){
$('#imageID').on('click touchstart', function() {
$(title).animate();
});
});
Any help will be appreciated.
Try to do this and see if it helps:
How to show tooltip on click
or this:
jQueryUI tooltip Widget to show tooltip on Click
$('#imageID').click(function() {
$('#imageID').tooltip({ items: "#imageID", content: "Displaying on click"});
$('#imageID').tooltip("open");
});
If that doesn't work, try this: http://jsfiddle.net/jtnmC/12/
Related
I have a header with some links. When the header gets short enough, it goes into mobile view (collapse style).
I want the dropdown to be shown initially, but can be toggled to hide and show again like normal. Basically what I want is: When the page loads/resizes and the navbar goes into mobile, toggle the dropdown so it's visible.
You can toggle a dropdown by doing:
$("#element").dropdown("toggle");
Play around with my example here: https://codepen.io/anon/pen/ZKbJJV
UPDATE:
$(document).ready(function() {
$(window).resize(function() {
if($(window).width()<=768) {
$("#element").removeClass("dropdown-menu");
}else{
$("#element").addClass("dropdown-menu");
}
});
if($(window).width()<=768) {
$("#element").removeClass("dropdown-menu");
}else{
$("#element").addClass("dropdown-menu");
}
});
Now I've tried again with remove and add classes and it works.
http://codepen.io/julianschmuckli/pen/ybYzQe
You can do execute the code, after the page was finished loading:
$(document).ready(function() {
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
$("#element").dropdown("toggle");
}
});
To detect if it is mobile, I copied the snippet from here: What is the best way to detect a mobile device in jQuery?
Or you can also try this version to define it with a specific width of page:
$(document).ready(function() {
if($(window).width()<=768) {
$("#element").dropdown("toggle");
}
});
I'm experimenting with jquery live preview plugin wich shows preview of websites on hover in tooltip. You can check out the plug in here: https://github.com/alanphoon/jquery-live-preview
I was wondering if it's possible to set up that plug in to be activated on click of button instead of default hover function?
I'm trying to set this up here but I did not succeeded: http://jsfiddle.net/dzorz/YARYp/
first one is default link on hover and second one is button on which I wanna apply this plug in but on click.
I've tried .on("click",function... and .click but it failed..
code looks like this:
html:
Hover over to preview, click to link!
<br />
<button class="clickpreview">Preview</button>
script:
$(document).ready(function() {
$(".livepreview").livePreview({
viewWidth: 400,
viewHeight: 300,
});
});
any suggestion or help is welcome
Thank you
Is this what you are looking for
$(document).ready(function() {
$(".livepreview").livePreview({
viewWidth: 400,
viewHeight: 300,
});
$("#btn").click(function(){
$("#link").trigger("mouseenter");
});
});
FIDDLE
Use .trigger('mouseover');
$('.clickpreview').on('click', function (e) {
$('.livepreview').trigger('mouseover');
});
DEMO
I have seen that some applications have grid view or form visible on alert box with vertical slide but really do not have any idea of how to achieve this.
Upto my knowledge i think this is possible with jquery..
Any help will be appreciated.
Thanks in advance..
You can use jquery ui-dialog
An example of login form inside a modal will look like this
jQuery(document).ready(function() {
jQuery("#dialog").dialog({
modal: true,
buttons: {
SUBMIT: function() {
$('#loginForm').submit();
}
}
});
});
FIDDLE
I´m developing an App and my client wants something like this
http://www.youtube.com/watch?v=F0F-jjIcEPY
As far as I know, this is a WebView, but how did they do this effect?
I want to develop something similar, any clue?
I think that maybe it could be done with jQuery Mobile, but how can you slide down and in some point open the image gallery?
I found some libraries for help:
SwipeBox => http://brutaldesign.github.io/swipebox/
TouchPunch (Resizable) => http://touchpunch.furf.com/content.php?/resizable/default-functionality
And there is a demo here
http://jsfiddle.net/iruindegi/B3TH7/
It is almost OK, but I need that when I resize, at somepoint the swipebox triggers, like in the video.
$(function() {
$( "#resizable" ).resizable();
});
I think that I should need to specify a maxHeight and fire SwipeBox when it reaches?
Any help or clue?
thanks in advance
You can listen to resize event and trigger any function once height reaches a predefined value, as in the code and demo below
Demo
$('#resizable').on('resize', function (e) {
var box_h = $(this).height();
if (box_h > 200) { // ** define height here ** //
e.preventDefault();
$.swipebox([{
href: 'http://swipebox.brutaldesign.com/assets/full/reine.jpg',
title: 'My Caption'
}, {
href: 'http://swipebox.brutaldesign.com/assets/full/nuke.jpg',
title: 'My Second Caption'
}]);
}
});
I am using the latest version of Twitter Bootstrap ( 2.3.2 ) as the framework for my site.
The only issue I have run into with Bootstraps navmenu is that when viewing the site on my phone, the dropdown links are not clickable. When you try to click the link the menu closes. Links outside of the dropdown work just fine though. I checked in my bootstrap-dropdown.js and looked for a recommended line of code I found on a GitHub discussion that is supposed to fix the issue but it was already there. What's the fix for this? I appreciate any help with this matter.
/* APPLY TO STANDARD DROPDOWN ELEMENTS
* =================================== */
$(document)
.on('click.dropdown.data-api', clearMenus)
.on('click.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() })
.on('click.dropdown.data-api' , toggle, Dropdown.prototype.toggle)
.on('keydown.dropdown.data-api', toggle + ', [role=menu]' , Dropdown.prototype.keydown)
}(window.jQuery);
I experienced the same issue. The submenus were not clickable on my mobile. I added the following javascript and it seems to work.
jQuery(document).ready(function($) {
$("li.dropdown a").click(function(e){
$(this).next('ul.dropdown-menu').css("display", "block");
e.stopPropagation();
});
});