here is my code http://jsfiddle.net/sanand29/5p8vgseh/2/ `
Page Header
</div>
<div class="ui-grid-a">
<div id="div1" class="ui-block-a">1st</div>
<div id="div2" class="ui-block-b">2nd</div>
<div id="div3" class="ui-block-a">3rd</div>
<div id="div4" class="ui-block-b">4th</div>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
.ui-grid-a div {
height: 150px;
}
#div1 {
background: #DDD;
background-image: url('xyz.png');
}
#div2 {
background: #AAA;
}
#div3 {
background: #777;
}
#div4 {
background: #444;
}
I am not getting the image inside the divided sections and even if i am getting image, its not responsive, please help
You need to add the following CSS to each of your div
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center center;
Related
I have to use parallax.js to background images in owl carousel. For example I wanna use http://pixelcog.github.io/parallax.js/ with https://owlcarousel2.github.io/OwlCarousel2/docs/started-welcome.html
How can I do it?
pen: https://codepen.io/naaatasha/pen/gRdoej
<div class="owl-carousel slider">
<div class="item slide-wrapper parallax-window" data-parallax="scroll" data-image-src="http://trawnik.nazwa.pl/TrawnikProducent2016/wp-content/uploads/slide-strong-1.jpg">
<div class="container">
<div class="box">
<h2 class="h2 wow fadeIn text-right">co tam</h2>
<span class="subtitle wow fadeIn">ihsisdijbvjd</span>
</div>
</div>
</div>
<div class="item slide-wrapper parallax-window" data-parallax="scroll" data-image-src="http://www.focus.pl/upload/galleries/19/trawa-19061_l.jpg">
<div class="container">
<div class="box">
<h2 class="h2">lorem ipsum</h2>
<span class="subtitle">asdsk jbsjfd</span>
</div>
</div>
</div>
</div>
.slider {
position: relative;
display: table;
}
.box {
display: table-cell;
vertical-align: middle;
width: 1%;
}
.slide-wrapper {
height: 800px;
width: 100%;
background-color: #333;
backround-size: cover;
}
.h2 {
font-size: 40px;
font-weight: 500;
margin: 0;
text-transform: uppercase;
}
.subtitle {
display: block;
font-family: 'latolight', sans-serif;
font-size: 30px;
text-transform: uppercase;
}
.parallax-window {
min-height: 400px;
background: transparent !important;
}
jQuery(document).ready(function() {
jQuery(".slider").owlCarousel({
items: 1,
loop: true,
nav: false,
dots: false,
autoplay: true,
autoplayTimeout: 4000,
animateIn: 'fadeIn',
//onChange : callback
});
// function callback(event) {
// jQuery('.parallax-window').parallax();
// }
});
So, let me tell my problem directly to the point. I'm developing a website right now. And so I try to visit this website I'm developing on with my iphone. The problem is, I got some different output when I visit that site with my PC and when I visit it with my iphone. This image is when I visit it with my PC's Chrome and the output is just the same with all other browser in my PC while this is when I visit it with my iphone's Safari and so the output is same too when I visit it with my iphone's Chrome . See the difference betwwem visit from iphone and from PC? Yep. I got that "space" above my navigation bar while visiting it with my iphone. So can anybody help me solve this problem? Thanks a lot in advance.
Btw this is my CSS and HTML
body {
background: rgb(25, 181, 254);
margin: 0px;
font-family: "Trebuchet MS", Helvetica, sans-serif;
}
#header {
width: 100%;
min-width: 1050px;
height: 150px;
margin-bottom: 20px;
text-align: center;
}
#logoBox {
display: inline-block;
width: 300px;
height: 150px;
overflow: hidden;
}
#logoBox:active {
height: 140px;
margin: 5px auto;
}
.logo {
background: url('img/icon/logo.png') no-repeat;
width: 300px;
height: 100%;
}
#navBox {
width: 150px;
height: 150px;
overflow: hidden;
display: inline-block;
}
.transition {
transition: height 0.15s, margin 0.15s, background 0.7s;
-webkit-transition: height 0.15s, margin 0.15s, background 0.7s;
-o-transition: height 0.15s, margin 0.15s, background 0.7s;
-ms-transition: height 0.15s, margin 0.15s, background 0.7s;
-moz-transition: height 0.15s, margin 0.15s, background 0.7s;
}
#navBox:active {
height: 140px;
margin-bottom: 5px;
}
#navBox.green {
background: rgb(80, 190, 106);
}
#navBox.orange {
background: rgb(250, 170, 30);
}
#navBox.green:hover {
background: rgb(4, 160, 114);
}
#navBox.orange:hover {
background: rgb(240, 130, 20);
}
#iconBox {
height: 53.4%;
width: 100%;
margin-top: 13.4%;
text-align: center;
}
#iconBorder {
width: 70px;
height: 70px;
border-radius: 40px;
border: 5px solid rgb(255, 255, 255);
}
img.icon {
width: 50px;
height: 50px;
margin-top: 10px;
}
a.nav {
display: inline-block;
text-decoration: none;
}
#navProp {
width: 100%;
height: 33.3%;
color: rgb(255, 255, 255);
text-align: center;
font-weight: bold;
font-size: 25px;
margin-top: 6.7%;
}
.center{
margin-left:auto;
margin-right:auto;
}
<html>
<head>
<title>Welcome to SIRIUS</title>
<?php require_once "theme.php"; ?>
</head>
<body>
<div id="header">
<a href="index.php" class="nav">
<div id="logoBox" class="transition">
<img src="img/icon/logo.png" class="logo">
</div>
</a>
<!--
-->
<a href="index.php" class="nav">
<div id="navBox" class="green transition">
<div id="iconBox">
<div id="iconBorder" class="center nav">
<img src="img/x.gif" class="icon home">
</div>
</div>
<div id="navProp">Home</div>
</div>
</a>
<!--
-->
<a href="aboutUs.php" class="nav">
<div id="navBox" class="orange transition">
<div id="iconBox">
<div id="iconBorder" class="center nav">
<img src="img/x.gif" class="icon aboutUs">
</div>
</div>
<div id="navProp">About Us</div>
</div>
</a>
<!--
-->
<a href="register.php" class="nav">
<div id="navBox" class="green transition">
<div id="iconBox">
<div id="iconBorder" class="center nav">
<img src="img/x.gif" class="icon register">
</div>
</div>
<div id="navProp">Register</div>
</div>
</a>
<!--
-->
<a href="login.php" class="nav">
<div id="navBox" class="orange transition">
<div id="iconBox">
<div id="iconBorder" class="center nav">
<img src="img/x.gif" class="icon login">
</div>
</div>
<div id="navProp">Login</div>
</div>
</a>
<!--
-->
<a href="admin.php" class="nav">
<div id="navBox" class="green transition">
<div id="iconBox">
<div id="iconBorder" class="center nav">
<img src="img/x.gif" class="icon admin">
</div>
</div>
<div id="navProp">Admin</div>
</div>
</a>
</div>
</body>
</html>
Apologies I cant see your images as work are blocking content :P
Im guessing here but most likely it would be something that is being specified by the browser, that you have not margins etc. Try using a reset.css file or maybe using debugging (F12) on a desktop and pretend to be a phone to debug. (I'm pretty sure in chrome you can specify a phone browser type to be, im assuming all modern browsers have emulation for mobile)
Or it could be min-width: 1050px;
If you are designing this for responsive design you might want to make some #media queries.
[edit] I also notice you have nothing specifying html. Perhaps the browser is adding some css against the html tag? html {margin:0; padding:0;}
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?
hi i don't know how to solve this issue, to resize div i use "overflow: hidden" but if i put this i can't drag to out of div (i can but is transparent), if I quit it and resize the div doesn't hides:
HTML
<div class="region">
dragg to me MADA FAKA
</div>
<div id="tabs">
<ul>
<li>tab-1</li>
<li>tab-2</li>
<li>tab-3</li>
</ul>
<div id="tabs-1">
<div class="destacado" title="destacado">
DRAGGABLE TO MADAFAKA 1
</div>
</div>
<div id="tabs-2">
<div class="destacado" title="destacado">
DRAGGABLE TO MADAFAKA 2
</div>
</div>
<div id="tabs-3">
<div class="destacado" title="destacado">
DRAGGABLE TO MADAFAKA 3
</div>
</div>
</div>
CSS
#tabs
{
position: fixed;
overflow: hidden;
width: 320px;
height: 150px;
padding: 0.5em;
border: 1px solid black;
z-index: 2;
}
.destacado
{
border: 2px solid black;
}
.region
{
width: 200px;
height: 200px;
border: 2px solid red;
}
JS:
$('#tabs').tabs();
$('#tabs').resizable();
$('#tabs').draggable();
$('.region').sortable(
{
connectWith: '.region',
items: 'div[title="destacado"]'
});
$('#tabs-1, #tabs-2, #tabs-3').sortable(
{
connectWith: '.region',
items: 'div[title="destacado"]'
});
jsFiddle without overflow: hidden: http://jsfiddle.net/hq9Pw/2/
jsFiddle with overflow: hidden: http://jsfiddle.net/hq9Pw/3/
finally solved with this:
connectWith: '.region',
appendTo: 'body',
containment: 'window',
helper: 'clone'
How can I display both left, right data-icons for a button in jquerymobile.
Thanks in advance.
Thanks,
nehatha
In jQuerymobile documentation, you can fix icon position to one area. If you want to display both (left and right), customized CSS and JS are needed.
data-iconpos="left"
data-iconpos="right"
data-iconpos="top"
data-iconpos="bottom"
Try this in your header part:
<div data-role="header">
Home
<h1>Add Contacts</h1>
Search
</div>
Create a grid inside your button, then add an image in the left column then css style it to look the same
<a data-role="button" data-transition="slide" data-theme="b" href="#"
data-icon="arrow-r" data-iconpos="right">
<div class="ui-grid-b">
<div class="ui-block-a">
<img src="image.png" class="iconleft"/>
</div>
<div class="ui-block-b">
Button
</div>
<div class="ui-block-c">
</div>
</div>
</a>
CSS:
.iconleft {
position: absolute;
top: 50%;
margin-top: -9px;
left: -5px;
width: 18px;
height: 18px;
-moz-box-shadow: 0 1px 0 rgba(255,255,255,.4);
-webkit-box-shadow: 0 1px 0 rgba(255,255,255,.4);
box-shadow: 0 1px 0 rgba(255,255,255,.4);
background-color: #666;
background-color: rgba(0,0,0,.4);
background-image: url(images/icons-18-white.png);
background-repeat: no-repeat;
-webkit-border-radius: 9px;
border-radius: 9px;
}
You can always do it the other way around, with the left being the dataicon and right being image but it doesn't really matter.
See my working example here or this fiddle