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.
Related
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;
}
I have a second page that is populated using data from an Ajax call on the home page. The header on this dynamically generated page is missing all its JQuery styling, and I suspect the two are related. This is my HTML for the page being generated:
<div data-role="page" id="breakdownDialog" data-add-back-btn="true">
<div data-role="header" id="cvResultsDialog">
<h3></h3>
<span></span>
</div>
<div data-role="content" id="dialogContent">
</div>
</div>
There is also some CSS styling I have used, which I think needs streamlining, but I don't think is causing the problem. This is because when I comment out this code the header is still missing the styling:
#cvResultsDialog {
width:100%;
text-justify: distribute-all-lines;
}
#cvResultsDialog:after{
content: '';
display: inline-block;
width: 100%;
height: 0;
font-size:0;
line-height:0;
}
#cvResultsDialog > h3 {
display: inline-block;
display:inline;
text-align="left";
}
#cvResultsDialog span {
display: inline-block;
vertical-align: baseline;
text-align="right";
}
I then populate the header (and the page) using the response from an Ajax call from the previous page. The page is populated on the click of a button (#resultsList) linking to this page:
$('#resultsList').on('click', '#cvResults', function() {
//find previous result that matches the filename on the link.
for(var i=0;i<storedResponses.length;i++){
var currentTitle=storedResponses[i].title;
var textClicked=$("h3",this).text();
if(currentTitle===textClicked){
currentResult=storedResponses[i];
}
}
$('#cvResultsDialog h3').text(currentResult.title);
$('#cvResultsDialog span').text(currentResult.percentage);
//this last bit is populating the page, so is irrelevant for this question
$('#dialogContent').empty();
for(var i=0; i<currentResult.profile_json.length; i++){
$('#dialogContent').append(
'<table cellpadding="0" cellspacing ="0" width="100%" style="border: 4px solid transparent;"><tr id="'+
currentResult.profile_json[i].title+'"><td>'+
currentResult.profile_json[i].id+'</td><td align="right">'+
currentResult.profile_json[i].value+'</td></tr>'
);
}
});
Finally here is a picture of the header. You'll notice it doesn't have the JQuery Mobile styling and the back button is missing.
Thanks all!
To get the back button, you need to apply the data-add-back-btn="true" to the header div not the page div.
<div data-role="header" id="cvResultsDialog" data-add-back-btn="true">
Working DEMO
Other than that the header looks correct given the CSS styling you are applying... Perhaps you can tell us how you want the header to be arranged?
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.