I have a jqueryUI dialog window that opens at pageload. Very simple, very easy:
<script>
$(function() {
$( "#dialog-modal" ).dialog({
dialogClass: 'fixed-dialog',
resizable: false,
width: 580,
top: 200,
modal: true
});
});
</script>
<div class="dialog-wrapper"></div>
<script>
$('.dialog-wrapper')
.html('<div id="dialog-modal" class="dialog-right bigdialog" title="Click to close"><img class="overlay-image" src="/images/digger-24k-anim.gif"></div>');
</script>
The problem is, I'd like to hide this on mobile browsers, but it's not working at all. Any attempts to use a css media query to display: none on certain monitor resolutions isn't getting picked up, as the element style on jquery-ui is display: block;
Any other way to achieve this?
Check the size of the screen. If it less than minimum size, skip dialog.
if($(window).height() >= miniumHeight && $(window).width() >= minimumWidth) {
/*Show Dialog Box*/
} else {
/*Do Something Else*/
}
Another way would be the css visibility: hidden;
Related
I have a rails app that's loading external websites (mostly articles) inside an iframe. And I've gotten the majority of the articles to be responsive on any device. I'm only having trouble with articles from certain websites on mobile Safari.
Examples:
1. http://vyrtex-staging.herokuapp.com/article/what-went-wrong-in-flint
2. http://vyrtex-staging.herokuapp.com/article/built-on-passion-how-vox-media-grew-from-its-roots-as-an-oakland-a-s-blog-into-one-of-the-internet-s-biggest-publishers
3. http://vyrtex-staging.herokuapp.com/article/why-isn-t-america-paying-attention-to-trevor-noah
Here is what each of those look on mobile safari:
1. http://i.imgur.com/UAsiJD3.jpg
2. http://i.imgur.com/QgYiOsp.jpg
3. http://i.imgur.com/4wg8y9w.jpg
They look completely fine on desktop Safari, and desktop/mobile Chrome — only mobile Safari is the issue.
Here's my CSS:
.body_container {
width:100%;
height: 100vh;
padding-top:5px;
position: relative;
background-color: white;
}
.intrinsic-container {
position: relative;
height: 0;
-webkit-overflow-scrolling: touch !important;
overflow: scroll !important;
}
.intrinsic-container iframe {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
Here's my HTML:
<div class="body_container">
<div class="intrinsic-container">
<iframe src="<%= #article.url %>"></iframe>
</div>
</div>
And here the javascript I'm running to keep the iframe responsive (the iframe itself, not necessarily the content inside of it):
<script>
var $iframes = $( "iframe" );
// Find & save the aspect ratio for all iframes
$(".intrinsic-container").each(function () {
$( this ).data( "ratio", this.height / this.width )
// Remove the hardcoded width & height attributes
.removeAttr( "width" )
.removeAttr( "height" );
});
$(document).ready( function () {
$(".intrinsic-container").each( function() {
// Get the parent container's width
var width = $( this ).parent().width();
var height = $( this ).parent().height() - $("#navbar").height();
var ratio = height / width;
var ratioString = String(ratio*100)+"%";
$(this).css('padding-bottom',ratioString)
$( this ).width( width )
.height( width * $( this ).data( "ratio" ) );
});
});
// Resize the iframes when the window is resized
$( window ).resize( function () {
$(".intrinsic-container").each( function() {
// Get the parent container's width
var width = $( this ).parent().width();
var height = $( this ).parent().height() - $("header").height();
var ratio = height / width;
var ratioString = String(ratio*100)+"%";
$(this).css('padding-bottom',ratioString)
$( this ).width( width )
.height( width * $( this ).data( "ratio" ) );
});
// Resize to fix all iframes on page load.
}).resize();
</script>
I'm guessing this is probably a CSS issue, where I have to add some webkit stuff to make sure the content inside the iframe loads responsively. Any thoughts on how I can fix this?
I am currently working on a page. I have used polymer's paper-drawer-panel and paper-header-panel combination.
Basically there are two containers, the inner container needs to be scrolled horizontally while the outer container needs to be scrolled vertically. When I have not used the paper-header-panel, the behavior is appropriate. You can see the demo here. If you open this site on a mobile browser (chrome or others/haven't checked with Safari) or on the mobile simulator in chrome, I can scroll both horizontally as well as vertically. This is the behavior I have expected.
But, when I add in the paper-header-panel (part of my custom element <app-layout>), I am able to scroll horizontally (in a mobile browser) but when I touch an element present in the horizontally scrollable div and try to scroll it vertically as in the previous case, the vertical scroll doesn't work anymore. The demo is present here.
The relevant source code for the app-layout element is as below.
html -
<dom-module id="app-layout">
<link rel="import" type="css" href="app-layout.css">
<template>
<paper-drawer-panel id="drawerPanel" responsive-width="1024px" drawer-width="280px">
<paper-header-panel class="list-panel" drawer>
<!-- List Toolbar -->
<div class="paper-header has-shadow layout horizontal center" id="navheader">
</div>
<!-- Menu -->
<div class="left-drawer">
<paper-menu class="list" selected="0" on-iron-activate="_listTap">
<template is="dom-repeat" items="{{menus}}">
<paper-item role="menu"><iron-icon class="menuitems" icon$={{item.icon}}></iron-icon><span>{{item.label}}</span></paper-item>
</template>
</paper-menu>
</div>
</paper-header-panel>
<paper-header-panel class$="{{positionClass}}" main mode="{{mainMode}}">
<!-- Main Toolbar -->
<paper-toolbar class$="{{toolbarClass}}">
<paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button>
<div style="width:60px" id="app-image"><iron-image style="width:40px; height:40px; background-color: lightgray;"
sizing="contain" preload fade src= "/images/app-icon-110.png"></iron-image></div>
<div hidden$="{{_isMobile}}" class="flex">{{label}}</div>
<div class="flex"></div>
<paper-icon-button icon="search" on-tap="toggleSearch"></paper-icon-button>
<paper-icon-button icon="more-vert"></paper-icon-button>
</paper-toolbar>
<div class="content">
<paper-material>
<content select=".main-content"></content>
</paper-material>
</div>
</paper-header-panel>
</paper-drawer-panel>
</template>
</dom-module>
CSS -
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
:host {
width: 100%;
height: 100%;
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
display: block;
}
#drawerPanel {
--paper-drawer-panel-left-drawer-container: {
background-color: #eee;
};
}
paper-header-panel {
background-color: #eee;
}
paper-toolbar {
background-color: #00bcd4;
}
.left-drawer {
background-color: #eee;
}
paper-header-panel .content {
height: 100%;
}
paper-header-panel[mode=cover] .content {
padding: 0 90px 0 0px;
height: 100%;
}
paper-header-panel {
--paper-header-panel-cover-container: {
height: 100%;
left: 90px;
};
}
paper-header-panel[mode=cover] paper-toolbar {
color: #fff;
font-size: 20px;
font-weight: 400;
padding-right: 16px;
}
.paper-header-panel paper-toolbar #app-image {
margin-left: -15px;
}
paper-material {
overflow-y: auto;
height: auto;
background-color: #fff;
z-index: 1;
}
paper-header-panel[mode=cover] paper-material {
max-width: 1024px;
margin: 64px auto;
}
From our Comments,
As an alternative solution until you find the problem you can test using Iscroll 5 for the horizontal scroll of the cards and see if it works ok within the App.
Ive used Iscroll 5 for my App using both horizontal and vertical scrolls with 100's of Items and its fast on Polymer. I haven't had any performance issues so far although i turned off bounce in iscroll options eg ,bounce: false to get that extra performance boost
If you have Click events for the Cards then add ,click:true to the Iscroll options
Iscroll 5 guide here http://iscrolljs.com/
The demo creates the Iscroll for any row when the user scrolls horizontally there to save resources and the Original Demo in my comments was for JQM framework which has built in Swipe detection.
In Polymer version 0.5 it has built in Touch functionality not sure about version 1 yet but i never used yet https://www.polymer-project.org/0.5/docs/polymer/touch.html
For Polymer i created another Demo that Uses Javascript Touch events to detect horizontal movements only so you wont need any Other Touch gesture Pluggings to add to the App
Demo I set a 5sec delay for the code to initialize. Pretty much all the code is for handling Touch. In the function slide(x) { is the Iscroll code about 10 lines
http://codepen.io/anon/pen/pJRmLo
Code
var slides = 17; //how many items in a row
var totalwidth = slides * 80; //times that by the width of each item in a row
$(".scroller").css("width", totalwidth+"px"); //set the total width of the horizontal wrapper
// touch function
var startPos;
var handlingTouch = false;
var itemis;
setTimeout(function() {
document.addEventListener('touchstart', function(e) {
// Is this the first finger going down?
if (e.touches.length == e.changedTouches.length) {
startPos = {
x: e.touches[0].clientX,
y: e.touches[0].clientY
};
}
});
document.addEventListener('touchmove', function(e) {
// If this is the first movement event in a sequence:
if (startPos) {
// Is the axis of movement horizontal?
if (Math.abs(e.changedTouches[0].clientX - startPos.x) > Math.abs(e.changedTouches[0].clientY - startPos.y)) {
handlingTouch = true;
e.preventDefault();
onSwipeStart(e);
}
startPos = undefined;
} else if (handlingTouch) {
e.preventDefault();
onSwipeMove(e);
}
});
document.addEventListener('touchend', function(e) {
if (handlingTouch && e.touches.length == 0) {
e.preventDefault();
onSwipeEnd(e);
handlingTouch = false;
}
});
function slide(x) {
var cclass = $(itemis).attr("class")
var ccclass = "."+cclass;
var newis = $(itemis).attr("data-id");
if (newis != "running") {
var cclass = new IScroll(ccclass, {
eventPassthrough: true,
scrollX: true,
scrollY: false,
preventDefault: false
});
cclass.scrollBy(-50, 0, 500);
//control here how many pixels to auto scroll uppon activating the scroll eg -50px
$(itemis).attr("data-id","running")
}
}
var swipeOrigin, x, itempos;
function onSwipeStart(e) {
// find what element is been touched. In your case it may be closest("swElement") but you need to test
itemis = $(e.target).closest("div");
// when touching over an element get its target, in this case the closest div of the row
swipeOrigin = e.touches[0].clientX;
}
function onSwipeMove(e) {
x = e.touches[0].clientX - swipeOrigin;
// slide(x);
}
function onSwipeEnd(e) {
//On Touch End if x (distance traveled to the right) is greater than +35 pixels then slide element +100 pixels.
if (x > 35) {
slide(0);
}
else {
slide(0);
}
}
}, 5000);
The above touch function I originally used for transforming/moving list items by touch drag similarly to Gmail App, for JQM and Polymer list items. Can be used for anything horizontally in the case of Iscroll is not really used in that way but it basically says if you touch move horizontally over a row activate the Iscroll for that row
Check my demo in the Link for an alternative use of the function.
jQuery touchSwipe event on element prevents scroll
The problem arises because on mobiles, horizontal scrolling is disabled when vertical scrolling is active and vice-versa. I have solved this for now using Tasos suggestion to use iScroll. I used polymer's async function to initialize the scrollers with a delay. Here is the code I have used as part of polymer-ready.
<script>
Polymer ({
...
...
ready:function() {
this.async(function() {
this.setScroll();
}, null, 300);
},
setScroll: function() {
var nodeList = document.querySelectorAll('.wrapper');
if(nodeList.length == 0) {
this.async(function() { this.setScroll(); }, null, 300);
}
for (var i=0; i<nodeList.length; i++) {
// this.setScrollDirection ('y', nodeList[i]);
nodeList[i].id = 'wrapper'+i;
var myScroll = new IScroll('#'+nodeList[i].id, { eventPassthrough: true, scrollX: true, scrollY: false, preventDefault: false });
// myScroll.scrollBy(-50, 0, 500);
}
}
})();
</script>
I was also able to use Polymers track gesture as mentioned in the documentation.
Listening for certain gestures controls the scrolling direction for
touch input. For example, nodes with a listener for the track event
will prevent scrolling by default. Elements can be override scroll
direction with this.setScrollDirection(direction, node), where
direction is one of 'x', 'y', 'none', or 'all', and node defaults to
this.
state - a string indicating the tracking state:
start - fired when tracking is first detected (finger/button down and moved past a pre-set distance threshold)
track - fired while tracking
end - fired when tracking ends
x - clientX coordinate for event
y - clientY coordinate for event
dx - change in pixels horizontally since the first track event
dy - change in pixels vertically since the first track event
ddx - change in pixels horizontally since last track event
ddy - change in pixels vertically since last track event
hover() - a function that may be called to determine the element currently being hovered
I have used (dx > dy) to understand whether it is a horizontal or vertical swipe and then enabled horizontal and vertical swiping specifically as per the case. This worked but I liked the bounce and the other options provided by iScroll and besides its only 4KB minified and gzipped. So, I decided to go with iScroll.
[Note: jQuery is not needed to use iScroll. It is an independent script]
I would like to highlight a div when it's clicked.
Heres the example: www.spidex.org
On this website if you hover any of the navigation buttons a div on the top of the page is highlighted.
You may use jQuery for achieving this.
get jQuery here.
now consider that you have a div that you want to highlight on mouseover called item.
do this by adding an overlay div.
div.overlay{
opacity:0;
background:#000;
width:100%;
height:100%;
position:absolute;
top:50px;left:0;
}
then use jquery
jQuery(document).ready(function($){
$('.item').mouseover(function(){
$('.overlay').css({opacity:0.3});
});
});
You can change the appearance of elements when hovered using the :hover pseudo-class.
For example
div:hover {
color: red;
}
Secondly, you can change the text color via using the color property and the background color using the background-color property.
Both are shown below:
div:hover {
color: black;
background-color: white;
}
In your given example, when you hover over the primary navigation items in the super-header, then the body dims. I agree with your analysis that this is managed with some cover div of the body.
One cross-browser approach (using jQuery in this example) you might consider would be the following:
EXAMPLE HTML:
<div class="header">
Some Link
</div>
<div class="body">
<div class="body-content">
[ CONTENT HTML ]
</div>
<div class="body-cover"></div>
</div>
EXAMPLE CSS:
.body {
position: relative; /* container needs position */
}
.body-cover {
position: absolute;
top: 0px;
left: 0px;
background-color: blue;
/*
you could use a sligtly transparent background here,
or tween your opacity in your javascript
*/
}
EXAMPLE JavaScript:
// on dom ready
jQuery(function ($) {
// closures
var $links = $('.header a');
var $body = $('.body');
var $content = $body.find('.body-content');
var $cover = $body.find('.body-cover');
var sCoverHiddenCssClassName = 'body-cover-hidden';
var sCoverTweeningCssClassName = 'body-cover-tweening';
var sCoverShowingCssClassName = 'body-cover-showing';
// closure methods
var fMouseOver = function () {
// check to see if hidden (not already tweening or showing)
if ($cover.hasClass(sCoverHiddenCssClassName)) {
// check content, may have changed.
$cover.css({
height: $content.outerHeight(),
width: $content.outerWidth()
});
// animate or tween cover (do this however you want)
$cover
.removeClass(sCoverHiddenCssClassName)
.addClass(sCoverTweeningCssClassName)
.fadeIn(function () {
// when completed, mark as showing/visible
$cover
.removeClass(sCoverTweeningCssClassName)
.addClass(sCoverShowingCssClassName);
});
}
};
var fMouseOut = function () {
// check to see if visible (not already tweening or hidden)
if ($cover.hasClass(sCoverShowingCssClassName)) {
// animate or tween cover (do this however you want)
$cover
.removeClass(sCoverShowingCssClassName)
.addClass(sCoverTweeningCssClassName)
.fadeOut(function () {
// when completed, mark as showing/visible
$cover
.removeClass(sCoverTweeningCssClassName)
.addClass(sCoverHiddenCssClassName);
});
}
};
var fClick = function (e) {
// prevent default if needed for anchors or submit buttons
// e.preventDefault();
if ($cover.hasClass(sCoverHiddenCssClassName)) {
fMouseOver();
}
else if ($cover.hasClass(sCoverShowingCssClassName)) {
fMouseOut();
}
};
// init interaction
$cover.hide().addClass(sCoverHiddenCssClassName);
$links.each(function () {
// wire links
jQuery(this)
.mouseover(fMouseOver)
.mouseout(fMouseOut);//
//.click(fClick); // use click event if desired
});
});
JQuery UI is also gives an good option to quickly highlight div .
https://jqueryui.com/effect/
$( "#divId" ).effect( "highlight", 500 );
I am trying to make a button that has a :hover state on a popup box, when you one of the buttons I am removing the box from the DOM and saving it for future interacts. the problem is when I reattach it to the DOM in IE9 it has not cleared the :hover state until you next hover it then mouse out.
Obviously this is not present on any other browser, but is reproducible here: http://jsfiddle.net/5dXSp/
I cant find a manual way of clearing a css :hover state, and I really dont want to have to rebuild the menu every time because of this. Any thoughts?
Try controlling the hover with a class and jQuery. This seemed to work for me:
http://jsfiddle.net/5dXSp/25/
CSS:
.box{
height:200px;
margin:10px 0;
}
.button{
display:block;
width:200px;
height:20px;
background:#ccc;
}
.hover {
background-color: #000;
}
jQuery:
$(".button").hover(
function () {
$(this).addClass("hover");
},
function () {
$(this).removeClass("hover");
}
);
$(".button").click(function(ev){
ev.preventDefault();
$(ev.target).appendTo($(".catch"));
$(this).removeClass("hover");
});
There is one additional way to fix it.
You can hide element before detaching it from DOM, but in a different event processing.
Something like that:
// HTML structure: <div id="aaa"> <a id="bbb"> Text </a> </div>
var bbb = document.getElementById('bbb');
var container = document.getElementById('aaa');
bbb.attachEvent("onclick", function() {
bbb.style.display = "none";
window.setTimeout(function() {
container.removeChild(bbb);
bbb.style.display = "";
// Some time later
window.setTimeout(function() {
container.appendChild(bbb);
}, 2000);
}, 1);
});
bbb.style.visibility = "hidden" worked too.
using jquery you can do ugly things like:
if($.browser.msie)
$('el').html($(el).html());
to de and attach the element
I'm inserting a very basic Google map into my page and the zoom control and streetmap icon are not visible, however if I place my mouse over where they should be I can zoom the map and enter streetview.
So the controls are there just not visible.
<script type="text/javascript"
src="//maps.googleapis.com/maps/api/js?key=<apikey>&sensor=false®ion=IT">
</script>
var myOptions = {
zoom: 17,
center: latlng,
panControl: true,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE
},
scaleControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
Any ideas what the problem could be?
That is definitely a CSS issue that you have with your code. Look for CSS that is applying to all images like:
img {
max-width: 100%;
}
I had this problem, the fix was to include this CSS ...
.gmnoprint img { max-width: none; }
The CSS selector .gmnoprint img gets to all images [img] on the Google Map [gm] controls that are non printing [noprint]. In my case max-width had been set globally to 100%. Unsetting this fixed the issue.
Best solution to reach only for google map
.gmnoprint img {
max-width: none;
}
I had a very similar issue and it turned out in my case NOT to be a CSS issue. In my case, the Content-Security-Policy header on our site was blocking certain images from being rendered. In this case it was blocking the street view images (loaded from a *.ggpht.com uri) and the button icons which use inline svg data specified using the data: scheme. To fix this, I added the following to the Content-Security-Policy header:
img-src data: 'self' https://*.googleapis.com https://*.google.com https://*.gstatic.com https://*.ggpht.com
Note that on the moment it's not even possible to show the full size zoom slider on touch devices (ipad etc). Here's the documentation:
http://code.google.com/apis/maps/documentation/javascript/controls.html
google.maps.ZoomControlStyle.SMALL displays a mini-zoom control, consisting of only + and - buttons. This style is appropriate for small maps. On touch devices, this control displays as + and - buttons that are responsive to touch events.
google.maps.ZoomControlStyle.LARGE displays the standard zoom slider control. On touch devices, this control displays as + and - buttons that are responsive to touch events.
I ran into a variant, with the offending css looking like:
img {
max-width: 100%;
max-height: 100%;
}
So, an additional line is needed:
#map_div img {
max-width: none !important;
max-height: none !important;
}
I'm thinking this might be a problem with the browser or the code within the page that you're embedding this map.
If I look at this simple hello world code, the maps controls show up fine. I geocoded this map to the same location as your sample, so its not anything to do with the location.
What happens when you use this sample?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=true®ion=it">
</script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(45.38686, 8.91927);
var myOptions = {
zoom: 17,
center: latlng,
panControl: true,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE
},
scaleControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>