I have a button that has some predefined CSS. With this button i have created an action button and a textarea.
Whenever i write some CSS in textarea then it should be added to existing button's CSS when submitting this CSS by action button.
I tried this-
jQuery-
$(function(){
$('.add').click(function(){
var custom=$('.textarea').val();
$('.button').css(custom);
});
});
But it doesn't seem to be working, How can i do this?
Is iframe Needed here?
Fiddle
You could try something like:
$('.button').attr("style", custom);
jsFiddle
Maybe try this
$(function(){
$('.add').click(function(){
var custom=$('.textarea').val().split(',');
$('.button').css(custom[0],custom[1]);
});
});
pass in background,redin text area
Related
I'm a novice in jQuery coding, and I need help with my code.
I have a button that allows me to reveal a hidden section on my website, but at the moment the button remains even though I want him to disappear.
My website is built with Wordpress and Divi.
With the following code, you will have my latest attempt with the hide/show value in CSS.
<style type="text/css">
.rv_button.closed:after {content:"";}
.rv_button.opened:after {content:"";}
.hide {display:none;}
.show {display:block;}
</style>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#reveal').hide();
jQuery('.rv_button').click(function(e) {
e.preventDefault();
jQuery("#reveal").slideToggle();
jQuery('.rv_button').toggleClass('opened closed');
});
});
</script>
If you want to see what it looks like, you can see the example here: https://divinotes.com/reveal-a-hidden-divi-section-row-or-module-on-button-click/
You're toggling classes named opened and closed, while your CSS shows that hide and show are the ones affecting element's presence in the final render of the page. Also there's probably no need for most classes. You can just add the hide one.
Chance your last non-trivial line to
jQuery('.rv_button').addClass('hide');
If you already have show class applied to the button, then your original idea makes sense. You just need to change the classes to match the ones you defined in styles.
jQuery('.rv_button').toggleClass('show hide');
Just add $(this).hide() in your click function.
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#reveal').hide();
jQuery('.rv_button').click(function(e) {
e.preventDefault();
jQuery("#reveal").slideToggle();
jQuery('.rv_button').toggleClass('opened closed');
// Hide button
$(this).hide()
});
});
</script>
Thanks everyone for your involvment in my question. I managed to use the solution of #vmf91 which works like a charm. Thanks again guys and have a lovely day.
Do you want to remove the button after clicking over it? If so, you just need to insert the following line inside the button event:
jQuery(this).hide();
The complete click event:
jQuery('.rv_button').click(function(e) {
e.preventDefault();
jQuery(this).hide();
jQuery("#reveal").slideToggle();
//You don't need this if you want to hide the button
//jQuery('.rv_button').toggleClass('opened closed');
});
I would like to run some code in the Chrome console so that a button would be clicked. I done a bit of research on how to do this, but all the results I found achieved this by using the button's id. However, I can't find the ID of this button and I don't think it has one.
Here is the source code (the button is highlighted)
Please click here
All help is appreciated.
Thanks.
You can click the button using class btn-play
1. javascript example
var elem = document.getElementsByClassName("btn-play")[0];
elem.addEventListener("click",function(){
alert("clicked");
},false);
2. Jquery example
$(".btn-play").click(function(){
alert("clicked");
});
if you want to trigger click on the button then use below
$(".btn-play").trigger("click");
Your parent div with the id 'maincard' can be used with jquery to select that button. look at the example below. Using nth-child you can select which button you want to use. Currently it is selecting the last button from the image.
$("#maincard button:nth-child(2)").on("click", function() {
//Do Stuff here
});
Hope that helps!
you can try to find your button:
$("#maincard").find(".uk-button.uk-button-default.btn-play.uk-button-large.uk-width-small");
You can click a button using class name.
Example:
<input type="button" class="btnClass" value="Click Me" />
$('.btnClass').click(function(){
alert('Clicked');
});
In my project , there is one anchor element as follows.
TRY NOW
I just want to disable the above anchor element when page completely loads. Actully I have used removeattr property of jquery. But I only want to disable the anchor element without removing onClick() event. So please help me in this question.
You say you'd like to keep your existing attribute handler. I suppose you're talking about handler definition, but not its processing, because that's what you're trying to prevent.
Solution 1: remove attribute completely
$(function(){
$(window).load(function(){
$("a").removeAttr("onclick");
});
});
Solution 2: change attribute code
$(function(){
$(window).load(function(){
var link = $("a");
var existing = link.attr("onclick");
link.attr("onclick", "return;" + existing);
});
});
Solution 3: change attribute but store definition
$(function(){
$(window).load(function(){
var link = $("a");
var existing = link.attr("onclick");
link.attr("data-onclick", existing)
.removeAttr("onclick");
});
});
This JSFiddle shows all three solutions. I've written it so that it doesn't change links on page load but rather simulates page load by clicking a link. Click any of the first three links first then simulate page load and click any link again and you'll see that all of them work.
You can try this
Using CSS
a{
pointer-events: none;
}
Dynamically using jquery
$(document).ready(function(){
$('a').css('pointer-events','none');
});
write script like below
$(window).load(function(){
$("a").removeAttr("onclick");
});
I have a page that has a lot of JS created elements. So i wish to focus a textarea after it appear. I try to make it with help of addEventListener like so:
mytextarea.addEventListener('someEvent', function(e)
{
this.focus();
});
My problem is, that i can not found the right Event, that would be fired at the moment, when textarea get appended in the document, like here
document.getElementsByTagName('body')[0].appendChild(mytextarea);
Native JS Only please. Thank you
Have you tried this:
document.getElementsByTagName('body')[0].appendChild(mytextarea);
mytextarea.focus();
FIDDLE
this should work:
<textarea autofocus></textarea>
Put your focus in
$(document).ready(function(){
//Here
});
This mean your textarea is appended to the document.
And without jQuery :
window.addEventListener('load', function () {
//here
});
I am new with JavaScript and I am trying to use it on my Inputbox.
I know how to add the width when I click on the Inputbox but I don't know how to remove the function on body click.
Check out this JSFiddle.
Use blur event on textbox:
var box = $$('.inputbox');
box.addEvent('blur', function myfunction(event){
box.morph({width:210});
});
See Demo: http://jsfiddle.net/r4nEv/1/
I would probably add the click event the result and not to the document body as well as use blure to make sure that the box is reset. here is a quick fiddle to demonstrate this.
http://jsfiddle.net/r4nEv/4/
Hope this helps!