I have a question about JavaScript: when the user clicks the jump-down button, the text box opens and the direction of button changes and rotates.
I think I should use two photo. when I click the jump-down button, the first photo hides and the other photo replaces, but I don't know how can I do this in JavaScript (the CSS code for imageButton2 doesn't work). Here is my code:
$(function () {
$("#jump_down").click(function () {
$("#wrapper").slideToggle("slow");
})
})
var show1=true;
$('#jump_down').click(function(event) {
document.getElementById('jump_down').style.visibility = show1 ? 'visible' : 'hidden';
document.getElementById('ImageButton2').style.visibility = show1 ? 'hidden' : 'visible';
show1 = !show1;
})
#jump_down{
position: relative;
display: inline-block;
width: 100%;
background-color: rgba(150,190,250,0.7);
padding: 20px 0;
}
#jump_down img{
width: 3%;
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}
#wrapper{
background-color: rgba(164,231,246,0.8);
overflow: hidden;
}
#ImageButton2 img{
width: 3%;
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}
<head>
<meta charset="UTF-8">
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script>
</head>
<body>
<a id="jump_down" href="#wrapper"><img src="https://d30y9cdsu7xlg0.cloudfront.net/png/427197-200.png" onClick="swapButtons(false)" style="visibility: visible; "></a>
<img src="http://dl.20script.ir/tools/back-up/UpBtn_20Script_2.png" id="ImageButton2" alt="Get Last Digits" style="visibility: hidden;" onClick="swapButtons(true)" />
<div id="wrapper">
<p>
Hellow
</p>
</div>
</body>
You can have a pure CSS solution for the image rotation.
Rotate the image once your #jump_down div has the class .open
#jump_down.open img{
transform: translate(-50%,-50%) rotate(180deg);
}
To toggle the .open class, apply jQuery toggleClass('open') when #jump_down is clicked.
$(function () {
$("#jump_down").click(function () {
$( this ).toggleClass("open");
$("#wrapper").slideToggle("slow");
})
})
#jump_down{
position: relative;
display: inline-block;
width: 100%;
background-color: rgba(150,190,250,0.7);
padding: 20px 0;
}
#jump_down img{
width: 3%;
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}
#jump_down.open img{
transform: translate(-50%,-50%) rotate(180deg);
}
#wrapper{
background-color: rgba(164,231,246,0.8);
overflow: hidden;
}
<head>
<meta charset="UTF-8">
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script>
</head>
<body>
<a id="jump_down" href="#wrapper"><img src="https://d30y9cdsu7xlg0.cloudfront.net/png/427197-200.png" style="visibility: visible; "></a>
<div id="wrapper">
<p>
Hellow
</p>
</div>
</body>
Related
I want to make link(.fm) appearing while hovering the image, but my code isn't working (when i hover to the link it starts to appear and dissapear fast).this is the code. I tried usind z-index but it didn't worked , also tried changing positions , but without succes. Any tips please.can you please help me by typing a working code or correcting mine?
.fm a{
position:absolute;
display: none;
background-color: #5D5D5D;
color:pink;
padding:10px;
}
.caine1 img:hover + .fm a{
display:block;
z-index: 1;
}
<div class="caine1">
<img src="1.png" width="400" height="250"></img>
<div class="fm">
Female
</div>
</div>
The code is working , but it have lags while hovering the .fm link
This is another example but using javascript.
This will help with your problem that link disappears so fast.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.wrapper {
width: 400px;
height: auto;
}
.fm {
position: absolute;
padding: 10px;
background-color: #5D5D5D;
}
a:link,
a:visited,
a:active {
text-decoration: none;
color: pink;
}
.caine1.fm {
display: block;
height: 250px;
width: 400px;
}
.link {
font-family: Verdana;
font-size: 16px;
color: crimson;
z-index: 1;
display: block;
width: 400px;
}
.hiddenLink {
display: none;
}
</style>
</head>
<body>
<div class="wrapper">
<div id="myImage" class="caine1">
<img id="img" src="1.png" width="400" height="250"></img>
<div id="link" class="hiddenLink">This is my hidden link</div>
</div>
</div>
<script>
document.getElementById("myImage").addEventListener("mouseover", function() {
document.getElementById("link").className = "link";
});
document.getElementById("img").addEventListener("mouseleave", function() {
document.getElementById("link").className = "hiddenLink";
});
</script>
</body>
</html>
Your using display none, and there is no transition animation on this component. Display none is binary, meaning there no way to animate this. Instead, use this:
To control the speed of animation, change the 1s in the transition property.
To change what the animation looks like, change the width, height, font-size, and opacity properties in the :hover selector
.fm a{
position:absolute;
width: 0;
height: 0;
visibility: hidden;
opacity: 0;
background-color: #5D5D5D;
color:pink;
padding:10px;
transition: all 1s ease-out
}
.caine1 img:hover + .fm a{
display:block;
z-index: 1;
width: 4rem;
height: 1.5rem;
font-size: 1rem;
visibility: visible;
opacity: 1;
}
<div class="caine1">
<img src="1.png" width="400" height="250"></img>
<div class="fm">
Female
</div>
</div>
I'm a complete beginner at coding and I've already searched here but I couldn't really find a proper solution to my problem.
I'm trying to get a text to appear in place of the image when I hover over the image with the mouse.
Unfortunately jQuery has to be used, I know it can be done by just using CSS.
So far I have the following which I found on here:
In the head:
<script>
$(function(){
$('.parent').mouseenter(function(){
$(this).children('.child').fadeIn();
}).mouseleave(function(){
$(this).children('.child').fadeOut();
});
});
</script>
In the body:
<div class='parent'>
<img src='https://ichef.bbci.co.uk/news/660/cpsprodpb/37B5/production/_89716241_thinkstockphotos-523060154.jpg' alt='image'/>
<div class='child'>
<p>Random text.</p>
</div>
</div>
CSS:
.parent
{
position:relative;
}
.child
{
position: absolute;
left: 0;
bottom: 0;
background-color: black;
opacity: 0.5;
padding:10px;
display:none;
}
Thank you for an easy tip or explanation on what I'm doing wrong and how I can solve that problem.
Edit:
This is my full code in my PHP file:
echo "
<!DOCTYPE html>
<html lang=\"en\">
<head>
<meta charset=\"UTF-8\">
<title>Test Blog</title>
<script>
$(document).ready(function() {
$('.gallery-item').hover(function() {
$(this).find('.img-title').fadeIn(300);
}, function() {
$(this).find('.img-title').fadeOut(100);
});
});
</script>
</head>
<body>
<script src=\"https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js\"></script>
<div class=\"wrapper clearfix\">
<figure class=\"gallery-item\">
<img src='https://ichef.bbci.co.uk/news/660/cpsprodpb/37B5/production/_89716241_thinkstockphotos-523060154.jpg' alt='image'>
<figcaption class=\"img-title\">
<h5>Random text.</h5>
</figcaption>
</figure>
</div>
And there it continues with a dropdown menu routing to the other pages.
The CSS code is in my CSS file which I linked to above (the link is correct since all the other CSS code is working).
$(document).ready(function() {
$('.gallery-item').hover(function() {
$(this).find('.img-title').fadeIn(300);
}, function() {
$(this).find('.img-title').fadeOut(100);
});
});
.gallery {
width: 25em;
margin: 2em auto;
}
.gallery-item {
height: auto;
width: 48.618784527%;
float: left;
margin-bottom: 2em;
position: relative;
}
.gallery-item:first-child {
margin-right: 2.762430939%;
}
.gallery-item img {
width: 100%;
}
.gallery-item:hover .img-title {}
.img-title {
position: absolute;
top: 0;
margin: 0;
height: 100%;
width: 100%;
text-align: center;
display: none;
background-color: #333;
}
.img-title h5 {
position: absolute;
color: #fff;
top: 33%;
width: 100%;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper clearfix">
<figure class="gallery-item">
<img src='https://ichef.bbci.co.uk/news/660/cpsprodpb/37B5/production/_89716241_thinkstockphotos-523060154.jpg' alt='image'>
<figcaption class="img-title">
<h5>Random text.</h5>
</figcaption>
</figure>
</div>
You have to define the size of the overly - I did that with the position settings below. Also, I erased the opacity setting. Not sure what else you want, but basically it works now.
$(document).ready(function() {
$('.parent').mouseenter(function() {
$(this).children('.child').fadeIn();
}).mouseleave(function() {
$(this).children('.child').fadeOut();
});
});
.parent {
position: relative;
}
.child {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: black;
padding: 10px;
display: none;
}
.child p {
color: white;
text-align: center;
margin-top: 100px;
font-size: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='parent'>
<img src='https://ichef.bbci.co.uk/news/660/cpsprodpb/37B5/production/_89716241_thinkstockphotos-523060154.jpg' alt='image' />
<div class='child'>
<p>Random text.</p>
</div>
</div>
Hope it helps you out.
$(function(){
$('.parent').mouseenter(function(){
//alert();
$(this).children('.child').show().fadeIn(200);//have some timeout for fading in
}).mouseleave(function(){
$(this).children('.child').fadeOut(400);
});
});
.parent
{
position:relative;
}
.child
{
position: absolute;
left: 0;
bottom: 0;
background-color: black;
opacity: 1.0;
padding:10px;
display:none;
/*
add width and height attribute to the elem
*/
width:100%;
height:300px;
color:white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='parent'>
<img src='https://ichef.bbci.co.uk/news/660/cpsprodpb/37B5/production/_89716241_thinkstockphotos-523060154.jpg' alt='image'/>
<div class='child'>
<p>Random text.</p>
</div>
</div>
I have little problem with FullCalendar dayClick. Is this possible to show my window (div with my css style) to add new event in calendar?
HTML
<div class="Calendar">
</div>
<div class="dayClickWindow">
</div>`
CSS
.dayClickWindow
{
width:500px;
height:500px;
border-radius:15px;
background-color:#000;
position:absolute;
left:50%;
top:50%;
margin-top:-250px;
margin-left:-250px;
display:none;
z-index:1;
}
JQ
$(document).ready(function() {
$('.Calendar').fullCalendar({
dayClick: function (data, event, view) {
$(this).show('.dayClickWindow');
}
});
});
You're supposed to call show on the element you want to show. Change $(this).show('.dayClickWindow'); to $('.dayClickWindow').show();
Demo below:
$(document).ready(function() {
$('.Calendar').fullCalendar({
dayClick: function(data, event, view) {
$('.dayClickWindow').show();
}
});
});
.dayClickWindow {
width: 500px;
height: 500px;
border-radius: 15px;
background-color: #000;
position: absolute;
left: 50%;
top: 50%;
margin-top: -250px;
margin-left: -250px;
display: none;
z-index: 1;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.0.1/fullcalendar.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.0.1/fullcalendar.min.css">
<div class="Calendar"></div>
<div class="dayClickWindow"></div>
JSFIDDLE:
https://jsfiddle.net/uj3uw9cp/1/
body {
color: white;
}
a {
color: white;
text-decoration: none;
}
#text-on-image {
overflow: auto;
position: absolute;
top: 10%;
left: 5%;
transform: translate(-50%, -50%);
margin-top: -10px;
visibility: hidden;
}
img:hover {
opacity: 0.8;
}
img:hover + #text-on-image {
visibility: visible;
}
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQ_lItiyoxw4jXqQs4Y3rFq7jklnJEJmR-gAeue-Z8gDu8rbh3pRA" width="150" height="150">
<div id="text-on-image">
<i class="fa fa-facebook"></i>
<p><strong>TEXT</strong>
</p>
</div>
As you can see in the example on JSFIDDLE, when someone hovers on the image, it will display a link and some text. My main problem is if someone hover on the text or links, the opacity deleted.
So I want that if someone hovers on the link or the text, the opacity will still be 0.8. Any suggestions?
Fixing opacity
That happens because when you hover the text, that will be the hovered element and the image will lost the hover. To solve this, just place the whole block into a container and place the hover selector to that element and select the contained image within it:
#container:hover > img {
opacity: 0.8;
}
Updated solution/JSFiddle
body {
color: white;
}
a {
color: white;
text-decoration: none;
}
#text-on-image {
overflow: auto;
position: absolute;
top: 10%;
left: 5%;
transform: translate(-50%, -50%);
margin-top: -10px;
visibility: hidden;
}
#container:hover > img {
opacity: 0.8;
}
#container:hover > img + #text-on-image {
visibility: visible;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div id="container">
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQ_lItiyoxw4jXqQs4Y3rFq7jklnJEJmR-gAeue-Z8gDu8rbh3pRA" width="150" height="150">
<div id="text-on-image">
<i class="fa fa-facebook"></i>
<p><strong>TEXT</strong></p>
</div>
</div>
Other recommendations
Keep in mind that in HTML5 elements have semantic meaning. Don't use them for their default styling. Achieve the needed style with CSS.
The <strong> element
The <strong> element represents a span of text with strong importance.
From W3C
For its style, use: font-weight: bold;
The <i> element
In some libraries <i> is used for icons, but that is against the HTML specification. Use <span> for this purpose.
The <i> element represents a span of text offset from its surrounding content without conveying any extra emphasis or importance, and for which the conventional typographic presentation is italic text; for example, a taxonomic designation, a technical term, an idiomatic phrase from another language, a thought, or a ship name.
From W3C
For its style, use: font-style: italic;
As you also mentioned Javascript/Jquery, I pose another solution using it
$('img,#text-on-image').mouseenter(function(){
$('img').css('opacity', '0.8')
})
$('img').mouseleave(function(){
$('img').css('opacity', '1')
})
body {
color:white;
}
a {
color: white;
text-decoration: none;
}
#text-on-image {
overflow: auto;
position: absolute;
top: 10%;
left: 5%;
transform: translate(-50%, -50%);
margin-top: -10px;
visibility: hidden;
}
#container:hover>img + #text-on-image {
visibility:visible;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQ_lItiyoxw4jXqQs4Y3rFq7jklnJEJmR-gAeue-Z8gDu8rbh3pRA" width="150" height="150">
<div id="text-on-image">
<i class="fa fa-facebook"></i>
<p><strong>TEXT</strong></p>
</div>
</div>
You can add visibility also in #text-on-image:hover, check below code
img:hover + #text-on-image,
#text-on-image:hover {
visibility:visible;
}
Or wrap whole item in to another div and change css to hover over div, check below code
HTML
<div class="parent">
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQ_lItiyoxw4jXqQs4Y3rFq7jklnJEJmR-gAeue-Z8gDu8rbh3pRA" width="150" height="150">
<div id="text-on-image">
<i class="fa fa-facebook"></i>
<p><strong>TEXT</strong></p>
</div>
</div>
CSS
#text-on-image {
overflow: auto;
position: absolute;
top: 10%;
left: 5%;
z-index: 1;
transform: translate(-50%, -50%);
margin-top: -10px;
visibility: hidden;
}
.parent:hover #text-on-image {
visibility: visible;
}
Case One: https://jsfiddle.net/nikhilvkd/uj3uw9cp/8/
Case two: https://jsfiddle.net/nikhilvkd/uj3uw9cp/7/
I am trying to make overlay over image while dragging but its also moving image when I move my textarea. So I want my edit area be transparent and overlay image. Please help
Here is what I have
<head>
<style>
.positionable {
width:100px; height:100px;
position:absolute;
}
.dragRegion {
background-color:#FFF; color:#000;
cursor:move;
top: -2px; left: -2px;
position: absolute;
font-size:14px; line-height:14px;
margin: -5px;
padding-left: 10px;
padding-top: 10px;
background-image:url('arrow_move.png');
background-repeat:no-repeat;
}
.editable {
width: 150px; height: 150px; padding: 0.5em;
position:relative;
}
</style>
</head>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js" type="text/javascript"></script>
<div class="positionable">
<div class="dragRegion"/>
<textarea id="resizable" rows="5" cols="20"></textarea>
<img src="http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif" style="z-index: 100" />
<script type="text/javascript">
$('.positionable').draggable({handle: '.dragRegion'});
$('.editable').resizable();
</script>
</div>
Use z-index on the draggable object.
For example:
.dragRegion {
z-index:500
.... old css code
}
You set the code in your CSS