I have tried to create a voting system similar to that in reddit. Each post have two buttons, and each button associated with specific post have different id. I have set the image of all the buttons as uncolored arrow.
<div class="details">
<li>AAAAA</li></div>
<div id="voting">
<div class="vote-up"><button id="up-e/aaaaa" title="Up" class="up " onclick="vote('e/aaaaa', 1,'swap')" ></button>
</div>
<div id="vote-score">
<div id="score-e/aaaaa"><span>51</span></div>
</div>
<div class="vote-down"><button id="down-e/aaaaa" title="Down" class="down" onclick="vote('e/aaaaa', 0, 'swap')" ></button>
</div></div>
</div>
<div id="content">
<div class="details">
<li>MIT</li></div>
<div id="voting">
<div class="vote-up"><button id="up-e/mit" title="Up" class="up " onclick="vote('e/mit', 1,'swap')" ></button>
</div>
<div id="vote-score">
<div id="score-e/mit"><span>40</span></div>
</div>
<div class="vote-down"><button id="down-e/mit" title="Down" class="down" onclick="vote('e/mit', 0, 'swap')" ></button>
</div></div>
</div>
This is the voting system which is working fine.
with this style
vote-up button{
height: 32px;
width: 32px;
border: 0;
background: url("upvote.png");
}
.vote-down button
{
height: 32px;
width: 32px;
border: 0;
background: url("downvote.png");
}
up to this each post has up and down arrow. when the user clicks the button the image of button should change, for that i have written this function in jquery
function vote(id, vote, userid){
if(!logged)
{
alert("You must be logged in to vote");
}
else {
if(vote==1){
$("#up-"+id).css({'background', 'url("upvoted.png")'});
$("#down-"+id).css('background', 'url("downvote.png")');
$("#up-"+id).attr('disabled', true);
$("#down-"+id).attr('disabled', false);
}
else {$("#down-"+id).css('background', 'url("downvoted.png")');
$("#up-"+id).css('background', 'url("upvote.png")');
$("#down-"+id).attr('disabled', true);
$("#up-"+id).attr('disabled', false);
}}
the "downvoted.png" and "upvoted.png" stores the images which are to be places in place of the former images when user clicks the button.
When i click the buttons the images are not changing.
You are using the .css method incorrectly. You need to have colons not commas between your attribute and the applier. Currently you have:
.css({'background', 'url("upvoted.png")'});
And you need to update it to:
.css({'background':'url("upvoted.png")'});
Or remove the brackets since you are only updating one style:
.css('background', 'url("upvoted.png")');
In addition you might be running into an issue with jQuery finding the Id since it has a slash in it. If you run into this issue use the following as your selector instead:
$("button[id*='down-" +id + "']")
And here is a working codepen:
http://codepen.io/egerrard/pen/EZvYpQ
Related
I want the css codes of the blog1popup class to change when the image is clicked.
I know how to do this with hover, but i don't know how to make this action happen by clicking.
The element I want to use as this button;
<div class="row">
<div class="col-lg-4 col-md-6 sm-mb-35px">
<div class="blog-item">
<div class="img">
<img src="assets/img/blog-grid-1.jpg" alt=""></a>
<span class="day">14</span> <span class="month">April</span>
</div>
Fransa Geneline Islak Mendil İhracı
<p style="padding-left: 30px; padding-bottom: 20px; margin-top: -25px; line-height: 20px;">Tüm dünya ülkelerine yardımseverliği gösteren ülkemize..</p>
</div>
</div>
This is the element I want to have changes in the css codes.
<div class="blog1popup"></div>
Example on hover technique;
.blog-item:hover > .blog1popup{
opacity: 100%;
}
You can add click event on blog-item class, then you can add classes to any element or change any css property using jquery methods.
Eg.
$(".blog-item").on("click", function (e) {
$(".blog1popup").css("opacity", "100%");
$(".blog1popup").addClass("any-class");
});
i want to disable input meaning unable for user to input something in the input element.
What i am trying to do?
i have two popups (one showing info and other with input element, cancel and submit buttons). now these two are rendered from the same div whose z-index is higher than all other elements in the application. meaning when these dialogues show up the user is unable to click any other element.
Now the problem is i dont want the user to input anything into the input element which is inside the dialogue that i mentioned above.
is there a way that i can do it somehow with z-index? i dont want to add some disabled property to input since it might break the code somewhere.
Below is the html code,
#root {
position: fixed;
z-index: 25;
}
.input_dialog {
flex-grow: 1;
}
.info_dialog {
width: 300px;
}
<div id="root">
<div class="info_dialog">some info</div>
<div class="input_dailog">
<form>
<div class="input_with_actions">
<input>
<div class="actions">
<button>cancel</button>
<button>submit</button>
</div>
</div>
</form>
</div>
</div>
using css you can use pointer-events: none
#root {
position: fixed;
z-index: 25;
}
.input_dialog {
flex-grow: 1;
}
.info_dialog {
width: 300px;
}
<div id="root">
<div class="info_dialog">some info</div>
<div class="input_dialog">
<form>
<div class="input_with_actions">
<input tabindex='-1'>
<div class="actions" >
<button>cancel</button>
<button>submit</button>
</div>
</div>
</form>
</div>
</div>
Update as ankit pointed out the pointer-events doesn't work for the tab navigation. So either you need to give tabindex a negative value , readonly or disabled (will have dimmed css effect)
I have list and each list has "move top" button.
when click "move top" button, div element shoul be move to top(in DOM).
But I am getting little trouble to make it.
Also when using keyboard tabbing to the button and press enter key, the focus has to be keep to the button, after press the keyboard enter.
This is what I tried so far here
Please help.
$('.btnTop').on('click', function() {
$(this).parent().prepend(this).focus();
});
.box {
border: 1px solid #000;
margin: 0 0 20px 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap">
<div id="aa" class="box">
aa <button class="btnTop">Top</button>
</div>
<div id="bb" class="box">
bb <button class="btnTop">Top</button>
</div>
<div id="cc" class="box">
cc <button class="btnTop">Top</button>
</div>
</div>
You are prepending the wrong item. You need to prepend the parent div of the button, not the button itself. Also, you need to prepend to the .wrap div, which is the button's parent parent rather than to the button's parent which is just the div wrapping the button.
Lastly, you need to focus() on this (which is the button you clicked) to get the tab button working. At the moment you are not focusing on the button you clicked on.
See working example below:
$('.btnTop').on('click', function() {
let this_div = $(this).parent();
this_div.parent().prepend(this_div);
$(this).focus();
});
.box {
border: 1px solid #000;
margin: 0 0 20px 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap">
<div id="aa" class="box">
aa <button class="btnTop">Top</button>
</div>
<div id="bb" class="box">
bb <button class="btnTop">Top</button>
</div>
<div id="cc" class="box">
cc <button class="btnTop">Top</button>
</div>
</div>
js file
var i = 0;
var original = document.getElementById('middle-section');
document.getElementById('btn').onclick = duplicate();
function duplicate() {
var clone = original.cloneNode(true); // "deep" clone
clone.id = "middle-section" + ++i;
// or clone.id = ""; if the divs don't need an ID
original.body.appendChild(clone);
}
css file
.middle-section-name{
position: absolute;
left: 500px;
top: 850px;
width: 200px;
height: 40px;
background-color: #aaaaaa;
border: 2px hidden;
}
.middle-section-edit{
position: absolute;
left: 700px;
top: 840px;
}
.middle-section-edit img{
width: 20px;
margin: 5px;
}
view
<body>
<div class="container-fluid">
<div class="header">
<p>header</p>
</div>
</div>
<div class="container">
<div class="logo">
<div class="logo-part">
<p>logo</p>
</div>
<div class="logo-name">
<P>logo name</P>
</div>
<div class="logo-edit">
<%= image_tag 'edit-logo.png'%>
</div>
</div>
<div class="top-main-section">
<div class="top-main-section-area">
<p>top main section</p>
</div>
<div class="top-main-section-edit">
<%= image_tag 'settings-logo.png'%>
</div>
</div>
<div class="top-banner-section">
<div class="top-banner-section-area">
<p>top banner section</p>
</div>
<div class="top-banner-section-edit">
<%= image_tag 'settings-logo.png'%>
</div>
</div>
<div class="middle-section" id="middle-section">
<div class="middle-section-name">
</div>
<div class="middle-section-edit">
<%= image_tag 'settings-logo.png'%>
</div>
<div class="middle-section-area">
<p>carosel</p>
</div>
</div>
</div>
<input type="button" value="click" id="btn" onclick="duplicate()"/>
</body>
I'm new to rails and I tried to add div section on click and show in view.I try with this code but still did not work and the error in console is cannot read property clone node of null. I tried with different ways to make it work but still I failed. Here is the HTML file, JS file and, CSS file below with an error of cloneNode undefined. CSS and HTML files are working but JQuery doesn't
Change this:
original.body.appendChild(clone);
To this:
original.appendChild(clone);
And also:
document.getElementById('btn').onclick = duplicate();
To this:
document.getElementById('btn').addEventListener('click', function() {
duplicate();
});
Here's a Codepen example.
The way you have it setup now is you're executing your duplicate function instead of attaching it to the event handler so that it can execute it for you later when somebody clicks on the btn div.
So change this
document.getElementById('btn').onclick = duplicate();
Into
document.getElementById('btn').onclick = duplicate;
You also have the same event attached to your input, so I recommend removing one of them.
Your other issue is as the above answer pointed out you're appending your clone to an invalid element.
If you want to append it to middle-section then change it to:
original.appendChild(clone);
Or if you want to append it to the body, change it to:
document.body.appendChild(clone);
jquery not support with middle rails tags. therefore cannot clone or append div sections. the standard way is using rails nested attributes conceptrails cocoon gem support to this task
I am writing a code with multiple divs that uses a button to change the background colors of divs when clicked. The background of the divs are hard coded into the html:
ex:
<div style="background-color: grey">
</div>
When I click the button, I want the background color to be permanently changed to white. However, the color only changes to white for an instant. the code is as such:
<script>
var divs=document.getElementsByTagName("div");
function noColors(){
for(i=0;i<divs.length;i++){
divs[i].style.backgroundColor="white";
}
};
</script>
<form>
<button onclick="noColors()"> I HATE THESE COLORS!!! </button>
</form>
Any help would be appreciated
Remove the form tag:
<button onclick="noColors()"> I HATE THESE COLORS!!! </button>
<div style="width: 100px;height: 100px; background-color: red"></div>
<div style="width: 100px;height: 100px; background-color: yellow"></div>
<div style="width: 100px;height: 100px; background-color: blue"></div>
<script>
var divs=document.getElementsByTagName("div");
function noColors(){
for(i=0;i<divs.length;i++){
divs[i].style.backgroundColor="white";
}
};
</script>
when the form tag is used and you click on the button the colors change but the form also submits, which leads to reload of the page. This way you loose the colors of the div elements.