i have problem my function not working in mobile browser but when i open in browser desktop work i dont know why... maybe anybody know or have experience like me
i have try this code
$('body').on('click touchstart', '.show_range', function(event) { alert("hello"); })
work in desktop but not in mobile browser
i have try this code when i set id in my link
$(document).on("click", "#show_range", function(event){
alert( "GO" );
});
work in desktop but not in mobile browser
if you are using bootstrap modal then make some change as below,
in bootstrap-responsive.css
.modal {
position: fixed;
top: 3%;
right: 3%;
left: 3%;
width: auto;
margin: 0;
}
.modal-body {
height: 60%;
}
and in bootstrap.css
.modal-body {
max-height: 350px;
padding: 15px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
OR
try this,
if( navigator.userAgent.match(/iPhone|iPad|iPod/i) ) {
var styleEl = document.createElement('style'), styleSheet;
document.head.appendChild(styleEl);
styleSheet = styleEl.sheet;
styleSheet.insertRule(".modal { position:absolute; bottom:auto; }", 0);
}
You can try the following:
$('#show_range').on("click", function(event){
alert( "GO" );
});
thank for you help guys now my problem solved..
my mistake i set href="javascript:void()" and i change to href="#"
Related
So basically I've created a modal which hides on exit using this code:
$('#emailToggle').on('click', function() {
$('body').toggleClass('dialogOpen');
});
$(document).keyup(function(e) {
if($('body').hasClass('dialogOpen')) {
if(e.keyCode == 27) $('body').toggleClass('dialogOpen');
}
});
I was trying to make it so that when the user touches outside the modal, the modal will fade as well as this.
I tried using:
$(document).on('click', function(){});
But I had no luck..
Thanks
Minimal example:
CSS:
.overlay{
display: none;
position: fixed;
width: 100%;
height: 100%;
z-index: 3;
}
.modal{
z-index: 4;
}
.showOverlay{
display: block;
}
JavaScript:
$('.overlay').on('click', function() {
$('body').toggleClass('dialogOpen');
$(this).toggleClass('showOverlay');
});
You can use jquery mobile http://www.w3schools.com/jquerymobile/jquerymobile_events_touch.asp
$("p").on("tap",function(){
$(this).hide();
});
This is a script for some navigation thing I have made... Works perfectly in firefox but doesn't work after the fadeInUpBig part of the function. I am wondering why this might be the case? I have also posted the css and html of the two classes that aren't loading in the script to help.
$('.fa-question-circle').parent().on('click', function () {
$('.submenu-ctn').fadeTo(0, 0);
$("#colorscreen").remove();
$( '#menu' ).multilevelpushmenu( 'collapse' );
$("body").append('<div id="colorscreen" class="animated"></div>');
$("#colorscreen").addClass("fadeInUpBig");
$('.fadeInUpBig').css('background-color', 'rgba(33,29,134, 0.2)');
$(".tile-area-main").css({width: "720px"}).load("what.html #overview");
$(".submenu-ctn").load("what.html .submenu-what");
$('.nav-toggle').removeClass('active');
$(this).addClass('active');
$('.submenu-ctn').fadeTo(3000, 1);
});
CSS for tile area main....
.metro .tile-area-main {
position: fixed;
left: 290px;
top: 150px;
display: inline-block;
padding: 8px;
width: auto;
color: #ffffff;
cursor: pointer;
z-index : 349;
width: 720px;
height: 400px;
overflow: hidden;
z-index : 3000;
}
.metro .tile-area-main p {
margin: 0;
padding: 0 2.4em 0.6em;
font-size: 1.2em;
line-height: 1.5;
color : #fff;
cursor: pointer;
}
and the html which is simple really...
<body class="metro">
<div class="tile-area-main"></div>
stupid post and stupid answer but there ya go... basically I was using a testing platform that was not configured properly... in the end i managed to get the browsers on my machine and test them ... worked find...... (oops)
no errors in console? its hard to say then.. maybe like so?
$('.fa-question-circle').parent().on('click', function () {
var submenuInCache = $('.submenu-ctn');
//Cache objects if you use them often ...
submenuInCache.fadeTo(0, 0);
$("#colorscreen").remove();
$( '#menu' ).multilevelpushmenu( 'collapse' );
$("body").append('<div id="colorscreen" class="animated"></div>');
//$("#colorscreen").addClass("fadeInUpBig"); as connexo said, no sens to this here...
$('.fadeInUpBig').css('background-color', 'rgba(33,29,134, 0.2)');
$(".tile-area-main").css({width: "720px"});
$(".tile-area-main").load("what.html #overview");
submenuInCache.load("what.html .submenu-what");
$('.nav-toggle').removeClass('active');
$(this).addClass('active');
submenuInCache.fadeTo(3000, 1);
});
By "doesn't work" I assume you mean "doesn't behave as expected"?
One thing to point out that you may have missed is that jQuery fade events are asynchronous. The thread will not wait for them to complete so
$('.submenu-ctn').fadeTo(0, 0);
$("#colorscreen").remove();
effectively results in #colorscreen being immediately removed. You should use callbacks for all this types of asynchronous effects:
$('.submenu-ctn').fadeTo(0, 0, function() {
$("#colorscreen").remove();
...
}
Here is all of my code... The inline JavaScript alert is firing off nicely, but the external alert is not. Whenever I reload the page I get a console error log saying "TypeError: tileBlock is null".. Any ideas? I've yet to come across this issue and I'd rather not be forced into writing all of my Javascript event handlers inline. Thanks!
#tileBlock {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #0b0b0b;
background-position: center;
background-repeat: no-repeat;
background-image: url(photo.jpg);
border: 20px solid #fff;
background-size: cover;
}
#media (max-width: 400px) {
#tileBlock {
border-width: 8px;
}
}
<body>
<div class="wrapper" id="tileBlock" onclick="alert('You clicked (inline)')"></div>
</body>
var tileBlock = document.getElementById('tileBlock');
tileBlock.onclick = function() {
alert('you clicked(external script)');
}
Include jquery library and try this:
$('#tileBlock').onclick(function(){
alert('you clicked(external script)');
});
Also I have tried your code and it works.(not my jquery)
Try this: http://jsfiddle.net/XcsN/evK3v/
I just needed a window.onload... Thanks everyone for the help!
window.onload=function(){
var tileBlock = document.getElementById('tileBlock');
tileBlock.onclick = function() {
alert('you clicked yes');
}
};
No need window before since it's reserved
onload=()=>{
let elem // etc..
elem.onclick=()=> // stuff ..
}
fiddle
Fiddle - http://jsbin.com/asaVUmAP/1/edit
I've been working on a website designer application, and today I added the ability to sort dialogs in a properties panel. My app is built for both desktop and touch devices. (I'm also using JQuery UI Touch Punch)
After I applied JQuery UI's sortable I tested it out on my iPod, and I can no longer scroll in a div contained in ".sort div". Does anyone know of a way to fix this?
Here's the code I'm using...
$('.sort-container').sortable({placeholder: "ui-state-highlight", helper:'clone', cancel: ".sort div"});
OK done.
I went a little overboard and started fixing other stuff too...some of which you'll probably change like the page height, etc. I did that so you can scroll the whole bar without being super exact, while still being able to scroll the tiny boxes AND sort them.
JSBin Code
JSBin Demo - use on iPhone
Javascript:
// Toggle Dialog Visibility
$(".dialogname").toggle(function () {
$(this).next().slideUp();
$(this).html(" ▶" + $(this).attr('title'));
}, function () {
$(this).next().slideDown();
$(this).html(" ▼" + $(this).attr('title'));
});
$('.sort-container').sortable({
items: '> .sort',
placeholder: "ui-state-highlight",
helper: "clone",
scroll: true
});
$('.dialog').on('click mousedown mouseover select touchstart touchmove', function (evt) {
var e = evt || window.event;
e.stopPropagation();
});
CSS:
body {
background:#ccc;
height: 100%;
}
.sort-container {
position:absolute;
top: 0;
right: 0;
width: 50%;
padding: 5%;
overflow: auto;
background: #202020;
}
.dialog {
position: relative;
margin: 10px auto;
width: 90%;
height: 150px;
color: #ccc;
background: #333;
overflow: auto;
}
.dialog textarea {
position:relative;
width:90%;
top:5%;
left:5%;
height:90%;
border:0;
padding:0;
margin:0;
}
.dialogname {
cursor:pointer;
color:#fff;
display:block;
width:100%;
}
There's a lot of HTML, really not a necessary part of this since I didn't change any of it.
Hope this helps :)
I am using Flot to graph some of my data and I was thinking it would be great to make this graph appear fullscreen (occupy full space on the monitor) upon clicking on a button. Currently, my div is as follows:
<div id="placeholder" style="width:800px;height:600px"></div>
Of course, the style attribute is only for testing. I will move this to CSS after during the actual design. Is there anyway I could make this div fullscreen and still preserve all event handling?
You can use HTML5 Fullscreen API for this (which is the most suitable way i think).
The fullscreen has to be triggered via a user event (click, keypress) otherwise it won't work.
Here is a button which makes the div fullscreen on click. And in fullscreen mode, the button click will exit fullscreen mode.
$('#toggle_fullscreen').on('click', function(){
// if already full screen; exit
// else go fullscreen
if (document.fullscreenElement) {
document.exitFullscreen();
} else {
$('#container').get(0).requestFullscreen();
}
});
#container{
border:1px solid red;
border-radius: .5em;
padding:10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<p>
Toggle Fullscreen
</p>
I will be fullscreen, yay!
</div>
Please also note that Fullscreen API for Chrome does not work in non-secure pages. See https://sites.google.com/a/chromium.org/dev/Home/chromium-security/deprecating-powerful-features-on-insecure-origins for more details.
Another thing to note is the :fullscreen CSS selector. You can append this to any css selector so the that the rules will be applied when that element is fullscreen:
#container:fullscreen {
width: 100vw;
height: 100vh;
}
When you say "full-screen", do you mean like full-screen for the computer, or for taking up the entire space in the browser?
You can't force the user into full-screen F11; however, you can make your div full screen by using the following CSS
div {width: 100%; height: 100%;}
This will of course assume your div is child of the <body> tag. Otherwise, you'd need to add the following in addition to the above code.
div {position: absolute; top: 0; left: 0;}
CSS way:
#foo {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
JS way:
$(function() {
function abso() {
$('#foo').css({
position: 'absolute',
width: $(window).width(),
height: $(window).height()
});
}
$(window).resize(function() {
abso();
});
abso();
});
For fullscreen of browser rendering area there is a simple solution supported by all modern browsers.
div#placeholder {
height: 100vh;
}
The only notable exception is the Android below 4.3 - but ofc only in the system browser/webview element (Chrome works ok).
Browser support chart: http://caniuse.com/viewport-units
For fullscreen of monitor please use HTML5 Fullscreen API
.widget-HomePageSlider .slider-loader-hide {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 10000;
background: white;
}
Can use FullScreen API like this
function toggleFullscreen() {
let elem = document.querySelector('#demo-video');
if (!document.fullscreenElement) {
elem.requestFullscreen().catch(err => {
alert(`Error attempting to enable full-screen mode: ${err.message} (${err.name})`);
});
} else {
document.exitFullscreen();
}
}
Demo
const elem = document.querySelector('#park-pic');
elem.addEventListener("click", function(e) {
toggleFullScreen();
}, false);
function toggleFullScreen() {
if (!document.fullscreenElement) {
elem.requestFullscreen().catch(err => {
alert(`Error attempting to enable full-screen mode: ${err.message} (${err.name})`);
});
} else {
document.exitFullscreen();
}
}
#container{
border:1px solid #aaa;
padding:10px;
}
#park-pic {
width: 100%;
max-height: 70vh;
}
<div id="container">
<p>
Toggle Fullscreen
</p>
<img id="park-pic"
src="https://storage.coverr.co/posters/Skate-park"></video>
</div>
P.S: Using screenfull.js nowadays. A simple wrapper for cross-browser usage of the JavaScript Fullscreen API.
This is the simplest one.
#divid {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
u can try this..
<div id="placeholder" style="width:auto;height:auto"></div>
width and height depends on your flot or graph..
hope u want this...
or
By clicking, u can use this by jquery
$("#placeholder").css("width", $(window).width());
$("#placeholder").css("height", $(window).height());
Use document height if you want to show it beyond the visible area of browser(scrollable area).
CSS Portion
#foo {
position:absolute;
top:0;
left:0;
}
JQuery Portion
$(document).ready(function() {
$('#foo').css({
width: $(document).width(),
height: $(document).height()
});
});
<div id="placeholder" style="position:absolute; top:0; right:0; bottom:0; left:0;"></div>
With Bootstrap 5.0 this is incredibly easy now. Just toggle these classes on and off the full screen element.
w-100 h-100 position-absolute top-0 start-0 bg-white