I have a set up where I have three squares, the first two are set up to fade away when the third one is clicked. When you click it what happens though is the first two just disappear, no fading, I can't really figure out why, any thoughts?
http://jsfiddle.net/6fSEz/
that's the fiddle and this is the code by itself:
<html>
<head>
<style>
.box
{
opacity:1;
color: white;
width: 100px;
height: 100px;
}
#box1
{
background-color: green;
}
#box2
{
background-color: red;
}
#box3
{
background-color: blue;
}
.fadeAway1
{
opacity:0;
-webkit-transition-property: opacity;
-webkit-transition-duration: 2s;
}
.fadeAway2
{
opacity:0;
-webkit-transition-property: opacity;
-webkit-transition-duration: 5s;
}
</style>
</head>
<body>
<div id="box1" class="box"></div>
<div id="box2" class="box"></div>
<div id="box3" onclick="box2.className='fadeway1';box1.className='fadeaway2';"
class="box">Tap to fade</div>
</body>
</html>
Thanks in advance for any help.
In the click function you are removing the styles applied by the ".box" class styles. This removes the width and height, etc. Also, CSS and JavaScript are case-sensitive. Capitalization between selectors must match the element attributes, exactly.
Updated jsfiddle: jsfiddle.net/6fSEz/2/
Related
I have tried using a vuetify class based on breakpoint it worked
<v-app :class="{'yellow': !$vuetify.breakpoint.xs}">
I have a class named pagemargin in a vue file
But when I use this class it is not working, as in the following case
<v-app :class="{'pagemargin': !$vuetify.breakpoint.xs}">
why is it not working?
<style >
.pagemargin{
margin-right: 100px;
margin-left: 100px;
color: red;
}
</style>
Add !important to your styles. Vuetify adds its default style to the whole v-app so you need to override it.
.pagemargin{
margin-right: 100px !important;
margin-left: 100px !important;
color: red !important;
}
Using !important might work, but in long term as your application gets bigger, it could be costly. You should instead, solve this by providing a CSS that has a higher specificity than that of Vuetify. I provide you with an example:
<template>
<div class="my-div">
<v-btn :class="{'my-padding': !$vuetify.breakpoint.xs}" tile outlined color="success">
View
</v-btn>
</div>
</template>
<style>
/* this wont work */
.my-div .my-padding {
padding-right: 200px;
padding-left: 200px;
}
/* this works */
.my-div .v-btn.my-padding {
padding-right: 200px;
padding-left: 200px;
}
</style>
<style scoped>
/* this also works */
.my-div .my-padding {
padding-right: 200px;
padding-left: 200px;
}
</style>
You can read more about specificity here.
I am new at this. I have cobbled together code from various examples. I am trying to create a map with a search widget and in which the popup info comes up in the bar at the bottom. I can't seem to do both.
When parser.parse() is commented out:
(1) the search widget appears, but doesn't have full functionality (no popup, no zoom).
(2) the popup information does not appear in the bottom bar
When parser.parse() isn't commented out, the search widget does not appear at all, but the popup information shows in the bottom bar when I click a feature.
What am I doing wrong?
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Garbage and Recycling</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.15/dijit/themes/claro/claro.css" />
<link rel="stylesheet" href="https://js.arcgis.com/3.15/esri/css/esri.css" />
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open Sans">
<style>
html, body {
height:100%;
width:100%;
margin:0;
padding:0;
margin:0;
font-family: "Open Sans";
}
#search{
display:block;
background-color: white;
position: absolute !important;
top: 20px;
right: 20px;
}
#container{
width: 100%;
position: absolute;
bottom:0;
background-color:rgba(0,0,0,0.8);
color: white;
}
#instructionDiv{
font-style:italic;
}
#zoneDiv{
font-weight: bold;
padding-bottom:0;
}
#linkDiv{
padding-top:0;
}
#garDiv{
padding-bottom: 0;
}
#recDiv{
padding-top:0;
}
#map {
padding:0;
}
.nav {
padding: 5px 10px;
background: #4479BA;
color: #FFF;
border-radius: 5px;
border: solid 1px #20538D;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
}
</style>
<script src="https://js.arcgis.com/3.15/"></script>
<script>
require([
"dojo/on",
"dojo/_base/connect",
"dojo/dom",
"dijit/registry",
"dojo/dom-construct",
"dojo/parser",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"esri/map",
"esri/arcgis/utils",
"esri/domUtils",
"esri/dijit/Popup",
"esri/dijit/Search"
],
function(
on,
connect,
dom,
registry,
domConstruct,
parser,
BorderContainer,
ContentPane,
Map,
arcgisUtils,
domUtils,
Popup,
Search
)
{
//parser.parse();
//Create a map based on an ArcGIS Online web map id
arcgisUtils.createMap("5cdc921a8e2d4eb08ab64a63d1c46e23", "map").then
(function(response){
var map = response.map;
//set infoWindow to false
map.infoWindow.set("popupWindow", false);
initializeBottomBar(map);
//create Search
var search = new Search({map:map, enableInfoWindow: true, zoomScale: 1000}, "search");
search.startup();
});
//initialize Bottom Bar (bottom)
function initializeBottomBar(map){
var popup = map.infoWindow;
//when the selection changes, update the info bar
connect.connect(popup, "onSelectionChange", function(){
displayContent(popup.getSelectedFeature());
});
connect.connect(popup, "onSetFeatures", function(){
displayContent(popup.getSelectedFeature());
});
}
function displayContent(feature){
if(feature){
var content = feature.getContent();
registry.byId("zoneDiv").set("content", content);
}
}
});
</script>
</head>
<body class="claro">
<div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'" style="width: 100%; height: 100%">
</div>
<div id="search" data-dojo-type="dijit/layout/ContentPane"></div>
<div id="container" data-dojo-type="dijit/layout/ContentPane">
<div id="instructionDiv" data-dojo-type="dijit/layout/ContentPane">Click a collection zone on the map for more details.</div>
<div id="zoneDiv" data-dojo-type="dijit/layout/ContentPane"></div>
<div id="linkDiv" data-dojo-type="dijit/layout/ContentPane"></div>
<div id="descDiv" data-dojo-type="dijit/layout/ContentPane"></div>
<div id="garDiv" data-dojo-type="dijit/layout/ContentPane"></div>
<div id="recDiv" data-dojo-type="dijit/layout/ContentPane"></div>
</div>
</body>
</html>
include this at the end of your require array
"dojo/domReady!"
no need to put a matching argument in the function though you can for completeness and to avoid issues when you inevitably add another module to require and forget to re-order the arguments so "dojo/domReady!" comes last.
EDIT:
additionally for any widget code you should include "dojo/ready" in the require array and then wrap the widget code in
ready(function(){..widget code goes here...})
See this codepen for a working example
See my answer to this question for more details
I'm trying to get an image to go over my posts, so the text and images go behind the image. The z-index isn't working when i try to get it to stack over everything. I'm not an expert at coding and I'm honestly just using tumblr for this, but I can't seem to find an answer anywhere. or one that I can understand, given the fact that I'm still a beginner. Any help would be super appreciated, here's the code:
#char {
position:fixed;
opacity: 1.0;
width: 1366px;
height: 768px;
TOP:0px;
LEFT:0px;
z-index: 4;
}
I have added a code snippet, it contains just a div. The div overlaps the body. if you provide your source code, I can clarify though. you could also try increasing the z-index to 99 or 999. I think there is many z index'd div's in your code.
<html>
<head>
<title></title>
</head>
<style type="text/css">
#char {
position:fixed;
opacity: 1.0;
width: 1366px;
height: 768px;
TOP:0px;
LEFT:0px;
z-index: 4;
background-color: red;
}
body{
background-color: #ccc;
}
</style>
<body>
<div id="char">
</div>
</body>
</html>
You could also try adding the image as a background image to an element and then putting your text in another element inside of that one. With a few lines of alignment code you can get your text where you want it.
<style>
.divStyle {
background-image: url('http://38.media.tumblr.com/a10b40131efc719d0bff421226b9c52b/tumblr_inline_mq5b19gEvv1qz4rgp.jpg');
background-size: cover;
height: 90vh; // put this to a 100 to cover the full height of the containing element (less here to avoid scroll bar)
width: 100%;
display: flex;
align-items: center; //change center to 'flex-start' to move text to top or 'flex-end' to move it to the bottom
}
.myText {
width: 100%;
color: white;
font-size: 24px;
text-align: center; //can also be 'left' or 'right'
}
</style>
<div class="divStyle">
<div class="myText">Here is my text</div>
</div>
I've searched and tried several of the solutions to no avail. I'm currently using jQuery 1.7.1 and Nivo Slider 3.0.1 .
You can see the website at http://www.wheelerbikeclub.net (this is a website I created last year and I'm just coming back to now).
None of the effects on my nivo slider in my home page are working. I know there was a point last year where they were, but then I changed something and now they don't and I cannot recollect what it is that happened.
I've made sure the number of columns/boxs/slices evenly divide my images. Does anyone have any idea what the issue is? Is it somehow related to the fact that I'm forcing my slider to cover the entire screen?
Thanks for any feedback, I greatly appreciate it!
I make calls for the jQuery followed by NivoSlider script in the head section
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery.nivo.slider.3.0.1.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
Then in my body in a wrapper I put
<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider">
<img src="img/new_slides/slide_1-3.png" alt="" title="#slide_1-caption"/>
<img src="img/new_slides/slide_2-4.png" alt="" />
<img src="img/new_slides/slide_4.png" alt="" />
<img src="img/new_slides/slide_3-1.png" alt="" />
</div>
<div id="slide_1-caption" class="nivo-html-caption">
<strong>Find Out More</strong>.
</div>
</div>
There are four images and I'm just testing the caption with image one.
In my nivo-slider css I have (not the entirety, just where I think the problem might lay)
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
z-index:2;
}
.nivo-slice {
display:block;
position:absolute;
z-index:100;
height:100%;
top:0;
}
.nivo-box {
display:block;
position:absolute;
z-index:5;
overflow:hidden;
}
.nivo-box img { display:block; }
And in my main styles.css I have
.slider-wrapper { position:relative;
top: 0px;
left: 0px;
width: 100%;
position:fixed;
z-index:0; }
#slider-div { min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -30px; }
Hope that makes sense.
A lot of topics on this... but not getting the point how to do it.
I have my JQM Header and Footer. I want the content area to fill the 100% height in between head and foot.
Thats my code, how is it possible?
<body>
<div data-role="page" id="entryPage" data-theme="d">
<div data-role="header" id="header" data-position="fixed" data-theme="d">
<h1>Page Title</h1>
</div><!-- /header -->
<div data-role="content" id="content" data-theme="d">
<div id="columnwrapper">
<div id="leftcolumn">
<div class="innertube">
Point 1
</div>
<div class="innertube">
Point 1
</div>
</div>
</div>
<div id="rightcolumn">
<div class="innertube">
<div id="switch1">
test
</div>
</div>
<div class="innertube">
test2
</div>
</div>
<div id="contentcolumn">
<div class="innertube">Content</div>
<div class="innertube">Content</div>
</div>
</div><!-- /content -->
<div data-role="footer" id="footer" data-position="fixed" data-theme="d">
<div id="switch2">
Expand main menu
</div>
</div><!-- /footer -->
</div><!-- /page -->
</body>
CSS:
#columnwrapper{
float: left;
width: 100%;
margin-left: -75%; /*Set left margin to -(contentcolumnWidth)*/
background-color: #C8FC98;
}
#leftcolumn{
margin: 0 40px 0 75%; /*Set margin to 0 (rightcolumnWidth) 0 (contentcolumnWidth)*/
background: #C8FC98;
}
#rightcolumn{
float: left;
width: 40px; /*Width of right column*/
margin-left: -40px; /*Set left margin to -(RightColumnWidth)*/
background: yellowgreen;
}
#contentcolumn{
float: left;
width: 75%; /*Width of content column*/
background-color: blue;
}
.innertube{
margin: 0px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
}
Actually the inner area only fills the height depending on the content... means 2 divs 2 rows, but not 100%..
Thanks
The CSS position: fixed doesn't work correctly in mobile browsers. My experience is with Android and iOS browsers and none of them impliment position: fixed properly (the exception is the iOS 5 browser but it's still in beta).
Rather than fixing an element to the screen and not moving it when the user scrolls in mobile browsers it tends to be treated like position: absolute and it moves when the page scrolls.
Also using the CSS overflow property won't allow scrolling on most mobile devices (iOS supports it but the user has to know to use two fingers while scrolling in a scrollable-div).
You can however use CSS but be aware you will need to use position: absolute or you can use JavaScript to set the heights on the elements.
Here is a jQuery Mobile solution using JavaScript to set the heights of the pseudo-page elements:
$(document).delegate('#page_name', 'pageshow', function () {
var the_height = ($(window).height() - $(this).find('[data-role="header"]').height() - $(this).find('[data-role="footer"]').height());
$(this).height($(window).height()).find('[data-role="content"]').height(the_height);
});
To get a flawless finish you need to take into consideration the behavior of the target device's address bar because if you want a fullscreen webpage then you have to add the height of the address bar to the height of the page.
Thanks, Jasper! That helped me a lot.
I had to mess around a lot to get this to work with multiple headers/footers, and to account for the url bar in ios. I thought I would share my solution for any one else having this issue.
This is working for me so far in ios simulator, but I would be eager to hear how it works on other devices.
/* detect device */
var ua = navigator.userAgent,
iphone = ~ua.indexOf('iPhone') || ~ua.indexOf('iPod'),
ipad = ~ua.indexOf('iPad'),
ios = iphone || ipad,
android = ~ua.indexOf('Android');
$(document).delegate('#the_page', 'pageshow', function () {
var $page = $(this),
$target = $(this).find('.fullHeight'),
t_padding = parseInt($target.css('padding-top'))
+ parseInt($target.css('padding-bottom')),
w_height = (ios)? screen.height-65: $(window).height(); // "-65" is to compensate for url bar. Any better ideas?
headFootHeight = 0;
// Get total height for all headers and footers on page
$page.find('[data-role="footer"], [data-role="header"]').each(function() {
var myTotalHeight = $(this).height()
+ parseInt( $(this).css('padding-top') )
+ parseInt( $(this).css('padding-bottom') );
headFootHeight += myTotalHeight;
});
var the_height = (w_height - headFootHeight);
$page
.height(w_height)
.find('.fullHeight')
.height(the_height - t_padding);
});
This script is setting a 100% height on '.fullHeight', instead of [data-role=content] to give more flexibility, but you can just add the fullHeight class to your [data-role=content] element.
One issue I'm still having is compensating for the url bar in ios, and finding a window height that works across devices. Any ideas on that?
the CSS:
footer {
display: block;
position: fixed;
left: 0;
bottom: 0;
right: 0;
height: 50px;
background-color: #333;
overflow: hidden;
z-index:1000;
-webkit-transform: translateZ(0);
opacity:.9;
}
header{
display:block;
position: fixed;
left:0;
right:0;
top:0;
height:50px;
overflow: hidden;
}
section{
display:block;
position:fixed;
left:0;
top:50px;
bottom:50px;
right:0;
overflow-y: auto;
}
nav{
display:block;
height:100%;
-webkit-backface-visibility: hidden;
}
.body{
overflow-y: hidden;
}
.bar {
border: 1px solid #2A2A2A;
background: #111111;
color: #ffffff;
font-weight: bold;
text-shadow: 0 -1px 1px #000000;
background-image: -webkit-gradient(linear, left top, left bottom, from(#3c3c3c), to(#111)); /* Saf4+, Chrome */
background-image: -webkit-linear-gradient(top, #3c3c3c, #111); /* Chrome 10+, Saf5.1+ */
background-image: -moz-linear-gradient(top, #3c3c3c, #111); /* FF3.6 */
background-image: -ms-linear-gradient(top, #3c3c3c, #111); /* IE10 */
background-image: -o-linear-gradient(top, #3c3c3c, #111); /* Opera 11.10+ */
background-image: linear-gradient(top, #3c3c3c, #111);
}
the only html needed:
<header class="bar" id="AllHead"></header>
<div data-role="content" class="content" id="home"><section><nav></nav></section></div><!-- /content -->
<footer class="bar" id="allFoot"></footer>
</div><!-- /page -->
you can then set whatever items you want inside the footer and the bottom nav bar
this will always look right, no matter what happens, also this wont flash on and off everytime you touch something. hope it helps