I have the following HTML:
<div class="menus">
<di class="menu-option">
Weather
</di>
<di class="menu-option">
Travel
</di>
<di class="menu-option">
<input class="search-input" />
<span class="search-btn">Search</span>
</di>
</div>
CSS
.menus {
float:right;
}
.menu-option {
display: inline-block;
border-left: 1px solid black;
padding: 0 15px;
}
.search-input {
display: none;
}
Javascript:
$('.search-btn').click(function(e) {
$('.search-input').show();
});
At this moment, I able to show the search box from hidden when clicking the Search text. How can I make the search box show up by moving from right to left and pushing other text to the left side, instead of showing the search box all of a sudden.
This is the JSFIDDLE example:
https://jsfiddle.net/1btm224h/5/
Thanks!
You can go with:
$('.search-btn').click(function(e) {
$('.search-input').show("slow");
});
Or you can go with:
$('.search-btn').click(function(e) {
$('.search-input').show(3000);
});
From jQuery official: "The default duration is 400 milliseconds. The strings 'fast' and 'slow' can be supplied to indicate durations of 200 and 600 milliseconds, respectively."
So you only need to add animation duration, which is built into the .show() by default.
look, I don't sure if you need this.
$('.search-btn').click(function(e) {
$('.search-input').addClass('open');
$('.search-input').FadeIn(300);
$('.menus').FadeIn(300);
$('.menus').addClass('mover');
});
.search-input.open{
display:block;
float:right;
}
.menus.mover{
float:left;
}
Related
I'm currently working on a dating website for a school project, but i'm stuck and not sure if i'm on the right way.
On the user profile, i want a list of the photos the user choose to show, and i want a hover on the photo where the pointer is.
In my state i added a listPhotoHover: [ ], a tab that contains variables true or false. listPhotoHover[0] = true means the first photo of the list has a hover, false means no hover.
I map and add a div for every photo with a onMouseEnter( ) that takes the photo index and set it an hover if fired.
The hover appears if listPhotoHover[index] exists, the hover div has an onMouseLeave( ) that takes the photo index and set the hover of the photo as false.
Everything seems to work but i'm not sure if it's the best way to do it, and when i move very fast on every photo the hover is still there i think the onMouseLeave( ) don't run.
Here's my code
Map of every photo :
photos.map((photo, index) => {
return
<div className={`flex row`} key={index} >
<img
className={classes.userPhotos}
src={photo}
alt={`photo de ${name}`}
onMouseEnter={() => { this.haveHover(index) }}
/>
{
listPhotoHover[index]
? <div
className={`
absolute flex center alignCenter
${classes.userPhotos} ${classes.photoHover}
`}
onMouseLeave={
() => { this.removeHover(index) }
}
/>
: null
}
</div>
})
function when onMouseEnter() or onMouseLeave() is fired:
haveHover (index, value) {
const tab = this.state.listPhotoHover
tab[index] = value
this.setState({listPhotoHover: tab})
}
I would like to know why does the onMouseLeave() don't work when my pointer move very fast and also what is the best way to do an hover on a map.
Thank you for your advices and sorry if i don't write english correctly
ps: i checked previous questions and didn't find any answer yet :(
Josephine
I don't believe you need javascript to achieve your desired effect. If it is simply to show something when the image is hovered, you can uses some advanced CSS selectors to do this. Run the snippet below to
html {
font-family: sans-serif;
font-size: 10px;
}
.wrap {
position: relative;
}
.image {
width: 80px;
height: 80px;
}
.imageinfo {
display: none;
width: 80px;
height: 17px;
background: #cc0000;
color: #efefef;
padding: 3px;
text-align: center;
box-sizing: border-box;
position: absolute;
bottom: -13px;
}
/* here's the magic */
.image:hover+.imageinfo {
display: block;
}
Hover the image to see the effect
<div class="wrap">
<img class="image" src="https://www.fillmurray.com/80/80" />
<div class="imageinfo">
Bill Murray FTW
</div>
</div>
I just realized i did it all wrong, i added a className with a '&:hover' on the div containing one photo, and it works. No need javascript :D
I don't know why i wanted to complicate it haha..
className:
ANSWER: {
'&:hover': {
opacity: '0.4',
cursor: 'pointer'
}
}
div with the photo:
photos.map((photo, index) => {
return <div className={`flex row ${classes.ANSWER}`} key={index} >
<img
className={classes.userPhotos}
src={photo}
alt={`${name}`}
/>
</div>
})
Hope my mistake will help some people
I have a buying and selling website and above the sellers photos I have a LIKE button which used to work fine but since I've added a new background and moved things around with new margins it is now not clickable. I believe there's a solution with CSS but not sure how to do it.
When logged in on this page: https://www.onlinecarbooty.com/go-booting.aspx
You will see the LIKE icons. You can log in with test12345#aol.com and Password: qwerty
Here's the code I have for the like button..
<div style="width:50px; height:50px; display: inline-block; background:url('/files/images/icons/stallIconLike50.png'); cursor: pointer;" onclick="addLike('<%# Eval("orderID")%>')">
<div style="font-size:12px; color:#000; background:#ffffff; border:1px solid #000; padding:0 3px; float:left; margin: 0px 0 0 38px;" id="<%# Eval("orderID")%>"> <%# Eval("likeCounter")%>
</div>
</div>
JAVA
<script type="text/javascript">
function addLike(stallID) {
$.post('add-like.aspx', { id: stallID }).done(function(data) {
originalColor = $('#'+stallID).css('background-color');
$('#'+stallID).css('background', 'yellow').html(data);
$('#'+stallID).html(data);
setTimeout(function(){
$('#'+stallID).css('background', originalColor);
}, 500);
});
}
</script>
Any help appreciated.
Considering your current markup,
.lasteventimg + div {
z-index: 1;
position:relative;
}
seems to do the trick.
Additionally, pointer-events:none on .stallNew > div:nth-child(2) > div in your layoutNew.css:746 disables pointer-events on the middle button, so the onclick never fires on those items.
It's clearly none of my business but, if you asked me, I'd say your website needs professional services for:
frontend development,
design/layout.
First of all many thanks for this page, it has been helping me a lot! But at this point I have a question where I cannot find an answer that fits what I want (maybe it cannot be achieved the way I am doing it).
I want to have a link with a static image, and when the user moves the cursor over the link I want an animated gif to play (the anim gif is set to not loop, so it only plays once). And when the user moves out go back to the static image and if the user goes in again, the gif should play again from the beginning.
I am using html5 combined with CSS to create my web (which I am using to learn at the same time). I did programing in the past with C++ and similar, but never on a web context.
So far this is what I tried:
CSS:
.img-acu
{
float: left;
width: 450px;
height: 264px;
background:transparent url("acu.gif") center top no-repeat;
}
.img-acu:hover
{
background-image: url("acusel.gif");
}
HTML:
But nothing at all appears :(
The weird thing is, I used this same example with two static images (png format) and it worked fine, but for some reason with the animated gif it doesn't want to work.
The I tried this:
CSS:
#test
{
width: 450px;
height: 264px;
background-image: url("acu.gif");
background-repeat: no-repeat;
background-position: left;
margin-left: 75px;
}
#test:hover
{
background-image: url("acusel.gif");
}
HTML:
<div id="test"></div>
And that works perfectly, it is just the link doesn't work and when the animated gif reaches the last frame, it never resets (unless I reload the page).
Do you know if there is any way to achieve this properly in HTML5 + CSS? should I use javascript or php?
I would really appreciate any help!
Thanks a lot!!
That can be achieved by use a static image and your gif image(Hey, that how 9gag do it!)
A basic script could be somthing like that:
<img id="myImg" src="staticImg.png" />
<script>
$(function() {
$("#myImg").hover(
function() {
$(this).attr("src", "animatedImg.gif");
},
function() {
$(this).attr("src", "staticImg.jpg");
}
);
});
</script>
Hopefully this simple way can help someone:
<img class="static" src="https://lh4.googleusercontent.com/-gZiu96oTuu4/Uag5oWLQHfI/AAAAAAAABSE/pl1W8n91hH0/w140-h165-no/Homer-Static.png"><img class="active" src="https://lh4.googleusercontent.com/i1RprwcvxhbN2TAMunNxS4RiNVT0DvlD9FNQCvPFuJ0=w140-h165-no">
Then add the following CSS:
.static {
position: absolute;
background: white;
}
.static:hover {
opacity: 0;
}
This should hopefully help some people. I got the code from a codepen and decided some stack overflow users may find it helpful. If you would like to view the original codepen, visit here: CodePen
The approach you took did not work because CSS will not change the background on < a >. Solving this can be done entirely with vanilla JS + HTML. The trick is to place:
<div class="img-acu">
inside of:
(insert here)
All that's left is to have CSS target the div. That way, you can set the static background, which then changes on :hover
Here's a fiddle showing this in action (or you can fiddle with this: https://jsfiddle.net/lyfthis/yfmhd1xL/):
.img-acu
{
float: left;
width: 250px;
height: 132px;
background:transparent url("https://i.imgur.com/7r91PY3.jpeg") center top no-repeat;
background-size: 125%;
}
.img-acu:hover
{
background-image: url("https://media.giphy.com/media/QMkPpxPDYY0fu/giphy.gif");
}
<!-- Don't do this:
-->
<div>
<div>Click on image below to go to link:</div>
<a href="https://www.google.com" title="ACU Project link">
<div class="img-acu"></div>
</a>
</div>
Try this if you are OK to use canvas:
<!DOCTYPE html>
<html>
<head>
<style>
.wrapper {position:absolute; z-index:2;width:400px;height:328px;background-color: transparent;}
.canvas {position:absolute;z-index:1;}
.gif {position:absolute;z-index:0;}
.hide {display:none;}
</style>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script>
window.onload = function() {
var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
var img = document.getElementById("gif");
ctx.drawImage(img, 0, 0);
}
$(document).ready(function() {
$("#wrapper").bind("mouseenter mouseleave", function(e) {
$("#canvas").toggleClass("hide");
});
});
</script>
</head>
<body>
<div>
<img id="gif" class="gif" src="https://www.macobserver.com/imgs/tips/20131206_Pooh_GIF.gif">
<canvas id="canvas" class="canvas" width="400px" height="328px">
Your browser does not support the HTML5 canvas tag.
</canvas>
<div id="wrapper" class="wrapper"></div>
</div>
</body>
</html>
I have a background image in a div that displays a US flag to represent English language. When the user clicks on the US flag, I want the flag to move up and display the Japanese flag below it so that the user can then switch languages when they click on either the US or Japanese flag.
I assume this, however, is what you want: http://jsfiddle.net/ctwheels/5fmjkkcf/
HTML
<body>
<div id="chooseLanguage">
<img style="z-index:100;" class="flags" src="http://static.buildasign.com/UPLOAD/images/listings/PID970_United_States_Flag.jpg" />
<img class="flags" src="http://worldwide.bose.com/electroforce/assets/images/learning_center/Japan_Flag.jpg" />
</div>
</body>
CSS
body {
background-color:grey;
}
#chooseLanguage {
margin-top:50px;
position:relative;
}
.flags {
height:30px;
width:40px;
position:absolute;
}
JS
$(".flags").click(function () {
flagHeight = $(this).height();
$(".flags").removeAttr('style');
$(this).css({
top: -flagHeight + "px"
});
});
I see some web sites use dynamic forms(I am not sure about how to call them!) to edit a group of data. For example: there is a group of data such as name, last name, city, country.etc. when user clicks on EDIT button, instead of doing postback, a form, consisisting of 2 textboxes + 2 comboboxes, dynamically opens to edit,And then when you click on Save button, edit form disappears, and all data updates..
Now, I know what happens over here is using Ajax for server calls and some javascript for dom manipulation.. I even found some jquery plugins for textbox editing.. However, I could not found anything for full implementation of form fields. Therefore I have implemented it on asp.net by jquery ajax calls and dom manipulation manually. here is my process:
1) when Edit button clicked: Make a ajax call to server to retrieve necessary formedit.aspx
2) it returns editable form fields with values assigned.
3) when Save button clicked: make ajax call to server to retrieve formupdateprocess.aspx page. it basically do the database updates and then return necessary DOM snipplet (...) to insert current page..
well ıt works but MY PROBLEM, is performance.. Result seems slower than samples I see in other sites.:((
IS there anything that I dont know? a better way to implement this??
I would keep the edit form on the client, but hidden with e.g. "style="display:none;", and then show it when the user clicks the edit button. Loading a form from the server in this event is very costly performance wise.
This is a very basic example and doesn't consider positioning the edit form etc.
<head>
<script type="text/javascript">
$(function () {
$("#showEdit").click(function () {
$("#editForm").css("display", "block");
});
});
</script>
</head>
<body>
<div id="editForm" style="display: none; position: absolute; z-index: 999;">
<fieldset>
<label for="surnameInput">Surname:</label>
<input id="surnameInput" type="text" />
<label for="firstNameInput">Surname:</label>
<input id="firstNameInput" type="text" />
</fieldset>
</div>
<input id="showEdit" type="button" value="Edit" />
</body>
This does mean your main page will have to carry the edit field values from first load, but very often that is a small price to pay, because the user accepts a wait at that time, not when they click a button.
I've used jQGrid in the past with ASP.NET (MVC doesn't support GridViews).
http://www.trirand.com/blog/
and demos at
http://trirand.com/jqgrid/jqgrid.html
(Check out the Row Editing ones).
Just an idea, but have you looked at Jeditable plugin which allows you to edit inline content?
And here is a tutorial, and the tutorial code with some improvements.
Here is how it is done if you are like me who loathes using plugins now and again.
The HTML:
<div id="pesa"><p>PERSONAL INFORMATION</p>
<ul>
EMAIL:<li class="editable">email</li>
NAME:<li class="editable">name</li>
TELLPHONE:<li class="editable">tel</li>
COUNTRY:<li class="editable">country</li>
CITY:<li class="editable">city</li>
</ul>
Then the CSS to cool things up:
#pesa a{
color: #000;
}
#pesa a:hover{
color: #;
}
#pesa a:hover{
text-decoration: none;
}
h1{
font-size: 30px;
padding: 0;
margin: 0;
}
h2{
font-size: 20px;
}
.editHover{
background-color: #E8F3FF;
}
.editBox{
width: 326px;
min-height: 20px;
padding: 10px 15px;
background-color: #fff;
border: 2px solid #E8F3FF;
}
#pesa ul{
list-style: none;
}
#pesa li{
width: 330px;
min-height: 20px;
padding: 10px 15px;
margin: 5px;
}
li.noPad{
padding: 0;
width: 360px;
}
#pesa form{
width: 100%;
}
.btnSave, .btnCancel{
padding: 6px 30px 6px 75px;
}
.block{
float: left;
margin: 20px 0;
}
Then the JavaScript:
$(document).ready(function()
{
var oldText, newText;
$(".editable").hover(
function()
{
$(this).addClass("editHover");
},
function()
{
$(this).removeClass("editHover");
}
);
$(".editable").bind("dblclick", replaceHTML);
$(".btnSave").live("click",
function()
{
newText = $(this).siblings("form")
.children(".editBox")
.val().replace(/"/g, """);
$(this).parent()
.html(newText)
.removeClass("noPad")
.bind("dblclick", replaceHTML);
}
);
$(".btnDiscard").live("click",
function()
{
$(this).parent()
.html(oldText)
.removeClass("noPad")
.bind("dblclick", replaceHTML);
}
);
function replaceHTML()
{
oldText = $(this).html()
.replace(/"/g, """);
$(this).addClass("noPad")
.html("")
.html("<form><input type=\"text\" class=\"editBox\" value=\"" + oldText + "\" /> </form>Save changes Discard changes")
.unbind('dblclick', replaceHTML);
}
}
);
So when someone hovers over the li items it turns blue just some colour to let the user know they can edit. When they double-click using the dblclick event, a form shows up with the value of the <li> item, just check the code. When they edit in the form and save, the form is removed and a list with the new htmlvalue is placed. You can then use an $ajax method to send the variables to the server side for processing.