i have dynamic images from a database...i want to have a couple of images on top of each other..like a banner ad, when one image fades the other one displays...
When you click on the image it should redirect to a specific link
This solution uses jQuery and the jQuery Cycle plugin. It basically runs it as a slide show, displaying one image at a time. The CSS puts a nice border around it, but you could eliminate that by adjusting the CSS. The cycle plugin has a number of options that you can use to adjust how the images transition.
<style>
.pics
{
padding: 0;
margin: 0;
margin-left: 48px;
}
.pics img
{
padding: 15px;
border: 1px solid #ccc;
background-color: #eee;
top: 0;
left: 0;
}
</style>
<script type="text/javascript">
$(function() {
$(window).load( function() { $(".pics").cycle() } );
});
</script>
<div class="pics">
<img alt="Banner Ad" onclick="location.href='/url/to/ad-site1.htm';" src="/url/to/img1.jpg" />
<img alt="Banner Ad" onclick="location.href='/url/to/ad-site2.htm';" src="/url/to/img2.jpg" style="display: none;" />
<img alt="Banner Ad" onclick="location.href='/url/to/ad-site3.htm';" src="/url/to/img3.jpg" style="display: none;" />
</div>
Related
Edit: The main issue is this: overflow: hidden and overflow: auto affect fixed positioned elements in iOS.
So if I have a fixed positioned modal dialog in a component within a scrolling feature of the page, that element is not displayed wherever it exceeds the bounds of its parent. This is really messed up, as it's not how fixed positioning works on any other system. So what's the official response to this?
Original post:
I have a modal dialog that works fine on desktop and Android, but on any browser on my iPad, the modal dialog, including the modal overlay, gets hidden wherever it exceeds the boundaries of its parent container (even though it is fixed positioned). I know that this isn't how overflow: auto is supposed to work, because it works just fine on all other devices. Anyone else experienced this? I'm sure it has something to do with how iOS handles fixed positions.
Anyway, here's some code:
HTML:
<confirm-dialog ng-if="$ctrl.confirmDlgShowing" on-close="$ctrl.closeDlgs()" on-confirm="$ctrl.deleteInstance()" class="ng-scope ng-isolate-scope">
<div class="modal general modal"><div class="modal-window"><div class="modal-inner" ng-transclude="">
<div style="position:relative" class="ng-scope">
<label class="modal-close" ng-click="$ctrl.onClose()"></label>
<div class="page-heading">
<h2>Are you sure?</h2>
</div>
<input class="btn" type="button" value="Yes" ng-click="$ctrl.confirm()">
<input class="btn" type="button" value="No" ng-click="$ctrl.onClose()">
</div>
</div></div></div>
</confirm-dialog>
SASS:
.container {
overflow: auto;
.modal-window {
// overlay
#include transition(opacity 0.25s ease);
#include position(fixed, 0px 0px 0px 0px);
background: rgba(0,0,0, 0.6);
padding-top: 0.6em;
text-align: left;
z-index: 999999999;
margin: 0 !important;
.modal-bg {
#include position(absolute, 0px 0px 0px 0px);
cursor: pointer;
}
}
.modal-inner {
#include transition(opacity 0.25s ease);
background: $modal-background;
border-radius: $base-border-radius;
display: table;
margin: 70px auto;
max-height: 80%;
overflow: auto;
padding: $modal-padding / 2;
z-index: 1000000000;
min-width: 400px;
#media(max-width: $medium-screen) {
max-height: 70%;
padding: $modal-padding;
}
}
}
Here's the workaround we finally came up with--a new directive to replace ng-if on our modals that places the object on the body. Plays nicely with other Angular bindings too.
angular.module('app').directive('rootIf', function()
{
return {
restrict: 'A',
link: function (scope, $elm, attrs)
{
scope.$watch(attrs.rootIf, onChangeRootIf);
function onChangeRootIf()
{
if (scope.$eval(attrs.rootIf))
$("body").children().first().before($elm);
else
$elm.detach();
}
}
}
});
Here's what I'm doing:
1) Add a "hide" CSS class:
.hide {
visibility: hidden;
display: none;
}
2) Add some HTML to where the Dialog should display, hiding it by default, such as:
<div class="hide" id="postTSec4" name="postTSec4">
<h2>Post-Travel Bottom</h2>
<img id="imgPostTravelBottom" name="imgPostTravelBottom" src="images/4_PTE_Bottom_Jig.png" alt="post Travel image" height="275" width="350">
</div>
<div class="hide" id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
3) In response to some event, unhide the div and call dialog() on it, such as:
$( "#dialog" ).removeClass('hide');
$( "#dialog" ).dialog();
The problem is that this causes the dialog to display in the middle of the page; I want the dialog to display with its NW corner at the tip of the cursor/pointer/finger.
So how can I control where the dialog appears?
UPDATE
I used the linked-to, supposedly-the-answer code as a basis, but no, it doesn't quite work in my situation.
UPDATE 2
With this code (adapted from meteorBuzz's answer):
CSS
.outer {
width: 100%;
height: 700px;
border: 2px green solid;
padding: 10px;
}
#dialog {
height: 100px;
max-width: 100px;
border: 3px black solid;
padding: 5px;
z-index: 100;
}
HTML:
<template name="postTravelSection5">
<div class="outer hide" id="postTSec5" name="postTSec5">
<div id="dialog" name="dialog" title="Basic dialog">
<p>This is dialog content area...</p>
</div>
</div>
</template>
JavaScript:
Template.postTravelSection5.events({
'click #postTSec5': function(event) {
var x = event.pageX;
var y = event.pageY;
$("#dialog")
.offset({
'left': x,
'top': y
});
}
});
Template.postTravel.events({
'click #imgPostTravel': function() {
. . .
$('#postTSec5').removeClass('hide');
}
});
("outer" and "dialog" are seen after "imgPostTravel" is clicked).
...it does not work; I see the two divs (the outer one with the green border, and the div dialog within it), but clicking does nothing.
You can have full control of the div behaviour by simply creating your own behaviour model instead of using jquery-ui for this particular matter.
Also, you can make the dialog look unique instead of having to over-ride jquery-ui default styling and positioning.
You may move the div to where the click event took place in two steps:
Capture x/y coordinates of the click event
Set these values to the styling of the div using javascript.
Notice, I've created an #outer div that spans most of the web page to allow the #dialog div to move within such a space.
HTML
<template name="postTravelSection4">
<div class="outer">
<div id="dialog" title="Basic dialog">
<p>This is dialog content area...</p>
</div>
</div>
</template>
JS
Template.postTravelSection4.events({
'click': function(event) { // you may add which element fires this function when you click it.
var x = event.pageX; // x coordinates
var y = event.pageY; // y coordinates
$( "#dialog" )
.offset({
'left': x,
'top': y
});
}
});
}
CSS
.outer {
width: 100%;
height: 700px;
border: 2px green solid;
padding: 10px;
}
#dialog {
height: 100px;
max-width: 100px;
border: 3px black solid;
padding: 5px;
z-index: 100; // incase of overlaps of divs, this one will remain on top
}
// create your hide/show classes to display and remove the div from display in the way you wish
Page A has an iframe (that loads Page B). That Page B has a div#OutputDiv. My goal is to make that div in that iframe scrollable.
SOLUTION (CREDIT TO STEVE!):
Include overflow: auto for that div. However you must specify height too. Simply give any fixed value. eg height: 0.
Use a javascript function to make the div's height always same as the window's, even after window resize. height is now not fixed.
Code:
#outputDiv {
font-size: 12px;
font-family: Arial;
margin-right: 1em;
overflow: auto;
overflow-x: hidden; (optional)
-webkit-overflow-scrolling: touch; (enable smooth scrolling on mobile)
height: 0; (omit-able)
}
$(window).resize(function(){
$("#outputDiv").css("height",0).css("height",$(this).height());
});
$(window).trigger("resize");
TL;DR Full story
Page A.html - has an iframe to load Page B. When on Page A, that div#OutputDiv in that iframe must be scrollable. Works fine on PC but not scrollable on iPad/Android. Page structure:
Page B.php - Left half div#OutputDiv, right half div#map-canvas containing Google Maps.
(Sidenote: I think the #map-canvas CSS is pretty unchangeable, for example changing something may cause the Maps to extend height beyond browser height, which is not what I want.)
Page A.html
<style type="text/css">
#title-banner {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
#real-time-alert {
margin-top: 155px;
margin-left: 10px;
}
.tab-content {
border-left: 1px solid #ddd;
padding: 10px;
height: 100%;
}
#map {
height: 100%;
}
.nav-tabs {
margin-bottom: 0;
}
#panel {
position: fixed;
top: 120px;
right: 10px;
bottom: 10px;
left: 350px;
}
iframe {
width: 100%;
height: 100%;
}
</style>
<body>
<div id="title-banner" class="well"><h1>Real-time incident updates</h1></div>
<div id="real-time-alert">
DEMO:<br>
<a id="demolink" style="cursor: pointer; font-weight: bold;">22/11/2013, 0.32.18AM: 3.128268, 101.650656<br></a>
</div>
<div id="panel">
<ul class="nav nav-tabs" id="myTab">
<li class="active"><a data-toggle="tab" href="#map">Map</a></li>
<li><a data-toggle="tab" href="#message">Messages</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="map"><iframe seamless name="map-report"></iframe></div>
<div class="tab-pane" id="message"></div>
</div>
</div>
</body>
Page B.php
*for div#map-canvas, I had to do the code below, or else when I hover on the page, div#OutputDiv will disappear. This may be not important.
$("*").hover(function(){
$("#map-canvas").css("position","fixed"); });
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map-canvas {
height: 100%;
width: 50%;
}
#content-pane {
float:left;
width:48%;
padding-left: 2%;
}
#outputDiv {
font-size: 12px;
font-family: Arial;
margin-right: 1em;
}
</style>
<body>
<div id="content-pane">
<div class='well well-small' id="inputs" style="margin: 1em 1em 0 0">
<b>TESTING ONLY</b> <br>
<label for="originLat">Incident Site: </label><input type="text" id="originLat" style="width:6em;" />
<input type="text" id="originLng" style="width:6em;" />
<button type="button">Calculate distances</button>
</br>eg. 3.126547,101.657825
</div>
<div id="outputDiv"></div>
</div>
<div id="map-canvas" style="position: fixed; right: 1px;"></div>
</body>
I can't see any overflow controls specified in the CSS (apologies if I missed them).
Have you tried:
div#OutputDiv { overflow: auto; height: 200px; }
The height is just for testing purposes - but you could use Javascript to get the actual height and apply it using either raw javascript or jQuery.
A good example (including how to detect orientation changes if device goes portrait to landscape or similar) can be found on:
How do I get the new dimensions of an element *after* it resizes due to a screen orientation change?
I have a problem with a div that at the begin is fixed in the bottom-left corner. I need to do it draggable but when I use jquery to do it the bottom position remains and the size of the div changes.
You can see the behavior in this page: http://paraguasparados.com
The div css code is:
.fcp-cpanel{
position:fixed;
bottom:20px;
left:10px;
z-index: 99999;
padding: 5px;
color: #000;
text-align: left;
font-size: 11px;
background:url('../img/blueicons/background.jpg') repeat-x;
border:1px solid #000;
}
The jquery code is:
$jn("#fcp-cpanel").draggable({
containment:"body",
scroll: false,
opacity: 0.35
});
When in firebug I remove the 'bottom' css style it works like it should.
Thanks for any help.
The easiest solution to this is to add a width and height to your fixed draggable <div> to stop it from resizing on drag.
The problem is that you are making a fixed element draggable and so the bottom css attribute is messing it up when you start moving it. A fix for this is to create a container div that has the fixed css attributes and inside you can add the draggable element. Something like this:
css:
.fcp-cpanel-container{
position:fixed;
bottom: 10px;
left:10px;
}
.fcp-cpanel{
padding: 5px;
color: #000;
text-align: left;
font-size: 11px;
background:url('http://paraguasparados.com/modules/mod_friendchatppd/img/blueicons/background.jpg') repeat-x;
border:1px solid #000;
}
html:
<div class="fcp-cpanel-container">
<div class="draggable fcp-cpanel">
<p><b>Amigos Online</b>
<span id="onlusers" class="onlusers">0</span><span onclick="register()"><img title="Registrar" alt="Registrar" src="http://paraguasparados.com//modules/mod_friendchatppd/img/blueicons/visible.jpg"></span>
<span onclick="maximize()" id="fcp-micon">
<img title="Maximizar" alt="Maximizar" src="http://paraguasparados.com//modules/mod_friendchatppd/img/blueicons/max.jpeg">
<img style="display:none;" title="Minimizar" alt="Minimizar" src="http://paraguasparados.com//modules/mod_friendchatppd/img/blueicons/min.jpeg">
</span>
</p>
</div>
</div>
I set up a working example with your code here: http://jsfiddle.net/NdUNu/.
I tried this and it did what I wanted
$(function() {
$("#draggable").draggable({ containment: "window" });
});
I'm trying to write a progress bar or add a loading gif to my Smart Gwt application, which starts in onModuleLoad, and ends when the app is just about to display. Is there some type of event handler that can determine this? I've looked but i haven't found anything.
Noticed no one has answered this while searching for something else.
If you look at the SmartGWT showcase they have a popup that displays while the application is loading. In my application, I coopted the mechanism there and you simply have to add this to your webapp.html:
as part of the <head>
<!--CSS for loading message at application Startup-->
<style type="text/css">
body { overflow:hidden }
#loading {
border: 1px solid #ccc;
position: absolute;
left: 45%;
top: 40%;
padding: 2px;
z-index: 20001;
height: auto;
}
#loading a {
color: #225588;
}
#loading .loadingIndicator {
background: white;
font: bold 13px tahoma, arial, helvetica;
padding: 10px;
margin: 0;
height: auto;
color: #444;
}
#loadingMsg {
font: normal 10px arial, tahoma, sans-serif;
}
</style>
as part of the <body> before the script tag loading your WebApp.nocache.js:
<!--add loading indicator while the app is being loaded-->
<div id="loadingWrapper">
<div id="loading">
<div class="loadingIndicator">
<!--<img src="images/pieces/48/cube_green.gif" width="32" height="32" style="margin-right:8px;float:left;vertical-align:top;"/>SmartGWT<br/>-->
<img src="WebApp/sc/skins/EnterpriseBlue/images/loading.gif" width="16" height="16" style="margin-right:8px;float:left;vertical-align:top;"/>WebApp<br/>
<span id="loadingMsg">Loading styles and images...</span></div>
</div>
</div>
<!--load skin-->
<script type="text/javascript">document.getElementById('loadingMsg').innerHTML = 'Loading skin...';</script>
<script type="text/javascript">
document.write("<"+"script src=WebApp/sc/skins/EnterpriseBlue/load_skin.js isc_version=7.1.js><"+"/script>");
</script>
<script type="text/javascript">document.getElementById('loadingMsg').innerHTML = 'Loading Application<br>Please wait...';</script>
<!--include the application JS-->