How can I place a checkbox within a button? [closed] - html

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I am using Bootstrap and want to place a checkbox within a button, similar to what is done with Gmail to select all messages. I have looked at the Gmail CSS but have been unable to determine how they've done it.

Here is a simple example, made of DIVs with some CSS and a little jQuery to check the checkbox when the button is clicked:
jsFiddle demo
HTML:
<div id="container">
<div id="btnOuterDIV">
<div id="btnChkbox">
<input type="checkbox" id="btnCB" />
</div>
</div>
</div>
CSS:
#container {padding:50px;}
#btnOuterDIV{height:30px;width:80px;border:1px solid #ccc;border-radius:5px;}
#btnOuterDIV:hover{border-color:#888;cursor:pointer;}
#btnChkbox{height:15px;width:15px;padding-top:5px;padding-left:5px;}
jQuery:
$('#btnOuterDIV').click(function(){
alert('You clicked the button');
$('#btnCB').prop('checked',true);
});
Edit:
Button text (a label) added to the button: http://jsfiddle.net/crrojLho/2/

Related

remove css class from wordpress using jquery / javscript [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 months ago.
Improve this question
<section class="page__title-area page__title-height page__title-overlay page__title-wrapper d-flex align-items-center " data-background="https://dev.itpt.co.uk/wp-content/uploads/2022/06/Untitled-1.png" style="background-image: url("https://dev.itpt.co.uk/wp-content/uploads/2022/06/Untitled-1.png");">
<div class="container">
</div>
</section>
From the above code, i want to delete class "page__title-overlay" through fronted javascript or jquery code, as i don't have access to wordpress core file like, functions.php. Can someone help
jQuery(document).ready(function(){
jQuery('section').removeClass('page__title-overlay');
});

Is it possible to move a division inside another division only using CSS scripting? [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
I am designing my own profile page on forums, but the creator of the website has disabled custom JavaScript support due to abuse, so I am wondering if it is possible to move one div inside another div?
Here's a HTML code example:
<div class="topLeft">
<div class="someDivClasses"></div>
</div>
<div class="topRight">
<div class="toMove"></div>
</div>
And the expecting result should look like this:
<div class="topLeft">
<div class="someDivClasses"></div>
<div class="toMove"></div>
</div>
<div class="topRight"></div>
From the last HTML code fences, you could clearly see that <div class="toMove"></div> has been moved from the division class topRight to class topLeft.
As of December 6, I've realized that it is required to use JavaScript to move a division inside a division. (And according to the answer below, it is not possible to perform this action using CSS.)
The only way I know how to do that is by using JavaScript. With CSS only, I think that it's impossible. Manipulating the DOM isn't a function of CSS.

Make "Star" by HTML [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I need some help with html)
I have this:
When i press to another "button" (like pig) text in the centre must change to another.
So question: what i need to use to make it. Maybe you have some example.
As I understand, you can solve your question with this:
<html>
</body>
<script>
function changeText()
{
document.getElementById('MiddleText').innerHTML = 'New Text in the middle';
}
</script>
<p id='MiddleText'>Your text in the middle</p>
<input type='myButton' onclick='changeText()' value='Change Text'/>
</body>
</html>

How to change color of products on a website? [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
I am attempting to build a website that displays clothes such as t-shirts and pullovers. What I want is there to be an option to change the color of the products like this example.
Can someone help me with this?
Assuming you need this for a website, You can easily do it with a bit of HTML and Javascript.
<div id = "clothes">
<img src="#" id= "clothing">
<button onclick= "change()">Click here</button>
<button onclick = "change2()"> Click here</button>
<button onclick = "change3()"> Click here</button>
</div>
Now for your Javascript do:
function change(){
clothing.src = "#";
}
function change2(){
clothing.src = "#";
}
function change3(){
clothing.src = "#";
}
For more information about functions see here
Hope this helps!

Why isn't this Facebook Plugin working? [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
JSFIDDLE: http://jsfiddle.net/t9h6W/
<body style="margin:0 0 0 0;background-color: #f4f4f4;">
<div>
The JSFiddle has all the code.
</div>
</body
Everything seems to be fine, I don't understand why the Facebook Social Plugin isn't working? More-so, how would i reposition the social plug in inside the login form that I have present on the page? No Idea why it isn't working :/
It says,
Invalid App Id: Must be a number or numeric string representing the application id.
Open your browser console and you will see Javascript error.
To reposition the FB login button, you can place the code inside a div and control the div to position the box.
ie., put the fb embed code inside a div like this,
<div class="fb-login">
<fb:login-button show-faces="true" width="200" max-rows="1"></fb:login-button>
</div>
Now you can apply style to 'fb-login' class to position the fb button.