I have this code:
<img src="<?php echo get_template_directory_uri() ?>/img/loader.gif" alt="<?php echo ANSIMUZ_THEME; ?>" />
How can I move loader.gif under main background? (so it will show up before main background and hides when background is loaded)
main background is somewhere maybe here:
$('#home-title').backstretch([
myJsVars.front_background1
I dont really know java
You can probably use pure css z-index to set the hierarchy.
Make sure the loader image has a lower z-index than #home-title.
Like this:
#home-title {
position: relative;
z-index: 2;
}
img#loader {
position: relative;
z-index: 1;
}
Don't forget add the id attribute id="loader" on your loader image element.
try this ...may be help ful to you
$(window).load(function() {
$('.image_loader').fadeOut(2000);
});
.main{
position:relative;
}
.image_loader{
position:absolute;
z-index:10;
top:0;
left:0;
width:100px;
}
.background_image{
z-index:1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="main">
<img class="background_image" src="http://placehold.it/700" alt="background" />
<img class="image_loader" src="http://oi57.tinypic.com/2rww2gz.jpg" alt="loader" />
</div>
Related
I have html this is basically like this:
<span>
<input name="checked_field" type="text" />
<p class="has-warning danger" style="display:none;">{{ error.first() }}</p>
</span>
The display:none is added by JavaScript at load time. It is removed if the user types an invalid value in checked_field.
Since the framework controls visibility by simply removing style="display:none;", I am wondering: Is it possible to transition the height and visibility by pure CSS rules when display:none is removed via JavaScript? Again, given that I'm not able to add a 2nd class, but am stuck with the JavaScript framework removing a style.
We can achieve this by overriding the display:none property.
.has-warning, .has-warning[style*='display:none'] {
transition: all 1s;
display: block !important;
height: 0;
opacity: 0;
}
.has-warning:not([style*='display:none']) {
height: 50px;
opacity: 1;
}
Here's a JS Fiddle: https://jsfiddle.net/eywraw8t/165903/
WARNING! CSS will see display:none as different from display: none (space in between) so if it doesn't work at first, check this.
it really easy
const dropDownSubInput = ref(false) //nuxt 3
.subForm {
width: inherit;
max-height: 0;
opacity: 0;
overflow-y: hidden;
transition: all .2s ease;
}
.formActive {
.form {
box-shadow: 0 41px 36px rgba(0, 0, 0, 0.2);
.subForm {
max-height: 1000px !important;
opacity: 1 !important;
}
}
}
<div class="formSection" :class="dropDownSubInput ? 'formActive' : ''">
<div class="form">
<form #submit.prevent>
<input type="text"
placeholder="Введите слово или название"
v-model="searchInput"
#click="dropDownSubInput = true"
/>
<font-awesome-icon :icon="['fas', 'fa-magnifying-glass']"/>
</form>
<div class="subForm">
</div>
</div>
</div>
** How to bring browse button inside text-box?
I have tried many solutions but I could not find.
Thanks-in-advance**
I had the same problem as you, if I understand it correctly.
You may want to use a javascript function to do so, or check the Mickael McGrady's solution :
http://www.quirksmode.org/dom/inputfile.html
Indeed, the display of your button/text-box depends on the version of your browser, so you may want to implement a relative button. On my website I did it in javascript which is more elegant, but if you prefer in html only :
<div class="fileinputs">
<input type="file" class="file" />
<div class="fakefile">
<input />
<img src="search.gif" />
</div>
</div>
and css :
div.fileinputs {
position: relative;
}
div.fakefile {
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
}
input.file {
position: relative;
text-align: right;
-moz-opacity:0 ;
filter:alpha(opacity: 0);
opacity: 0;
z-index: 2;
}
<div class="fileinputs">
<input type="file" class="file" />
<div class="fakefile">
<input />
<img src="search.gif" />
</div>
</div>
(everything is detailled on the website since it's a well-known issue). Hope it helps.
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.
I have a problem with my responsive flexslider plugin. The plugin works fine unless you have many images in the actual slideshow. The loading behavior is then just not acceptable.
I was hoping someone can help me with the following flexslider image preloader script since I can't get it to work.
Here is the code I'm using:
FLEXSLIDER HTML
<div class="slider">
<div class="flexslider loading" style="overflow-x: hidden; overflow-y: hidden; ">
<ul class="slides" style="width: 5200%; -webkit-transition-duration: 0s; -webkit-transform: translate3d(-9702px, 0px, 0px); ">
<li style="float: left; display: block; width: 940px; ">
<img src="image1.jpg">
</li>
<li style="float: left; display: block; width: 940px; ">
<img src="image2.jpg">
</li>
<li style="float: left; display: block; width: 940px; ">
<img src="image3.jpg">
</ul>
</div>
FLEXSLIDER SCRIPT IN HTML HEAD
<!-- FlexSlider -->
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.flexslider').flexslider({
animation: "slide",
slideshow: false,
controlsContainer: ".slider"
start: function(slider) {
slider.removeClass('loading');}
});
});
</script>
FLEXSLIDER.CSS
.loading {min-height: 300px; background: url('loader.gif') no-repeat center center;}
Any help is appreciated!
Instead of using the slider object from flexslider, try just making the slider element itself a jQuery object.
<!-- FlexSlider -->
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
var target_flexslider = $('.flexslider');
target_flexslider.flexslider({
animation: "slide",
slideshow: false,
controlsContainer: ".slider",
start: function(slider) {
target_flexslider.removeClass('loading');
}
});
});
</script>
I tried for many time and for me it worked like this:
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.flexslider').flexslider({
start: function(slider) {
slider.removeClass('loading');
}
});
});
</script>
And on flexslider.css
.loading {min-height: 300px; background: url('loader.gif') no-repeat center center !important;}
Note the "!important" part, it didn't work without because it was colliding with flexslider's default white background. I set the html like
<div class="flexslider loading">
I managed to get it working using the callback "before" instead of "start".
So the JS bit would be:
<!-- FlexSlider -->
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.flexslider').flexslider({
animation: "slide",
slideshow: false,
controlsContainer: ".slider"
before: function(slider) {
slider.removeClass('loading');
}
});
});
</script>
Try adding for each li 'style="display: none;"', except the first li. It should work.
I was struggling with this too, and the answer is really simple in fact. The only thing that is wrong in your code is this:
<div class="flexslider loading" style="overflow-x: hidden; overflow-y: hidden; ">
And in your css you define for loading the class .loading
So you must change the clas for that div. Like this:
<div class="loading" style="overflow-x: hidden; overflow-y: hidden; ">
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/