how can I override the style "color: red" either with javascript or CSS? I want to make it "2px" instead of "1px" border.
<div style="border: 1px solid #ccccc !important">
Lorem...
</div>
I can NOT add a class, id to the "div". that is not a solution here. I have to override the code above somehow.
Solution
Used jquery already loaded on the site.
Ran:
$( document ).ready(function() { $('table[style*=border]').css('border-width',"4px"); });
https://jsfiddle.net/78oxmgLj/10/
With your actual code you cannot do it with CSS (As #T.J. Crowder commented, there is no CSS rule that can beat inline with !important) but here is a JS solution:
document.querySelector('.box').style.borderWidth="2px";
document.querySelector('.box').style.borderColor="red";
//or
//document.querySelector('.box').style.border="2px solid red";
<div class="box" style="border: 1px solid #cccccc!important">
Lorem...
</div>
UPDATE
If for some reason you cannot add class you can use attribute selector based on style (but I don't advice to use this as a generic solution)
document.querySelector('div[style*=border]').style.borderWidth="2px";
document.querySelector('div[style*=border]').style.borderColor="red";
<div style="border: 1px solid #cccccc!important">
Lorem...
</div>
While the accepted answer is true, there are ways depending on your usecase that you can do here with CSS alone. Even if you cannot override the specific value, you can use a different property to change the original state.
b {
filter: hue-rotate(250deg); /*blue*/
}
i {
display: inline-block;
transform: scale(0.4);
}
<b style="color: red !important">Stack</b>
<i style="font-size: 50px !important">Stack</i>
In your example, if you need to change 1px important inline border to 2px, you can use outline or box-shadow without blurring:
div:first-child {
box-shadow: 0 0 0 3px #ccc;
}
<div style="border: 1px solid #cccccc !important">
Lorem...
</div>
<br>
<div style="border: 4px solid #cccccc !important">
Lorem...
</div>
Related
I want to show text right side to image and I was successful to made it but when I add another div for border the text doesn't show up, it's like invisible but still taking its space I tried but I can't figure out the problem here you can see the live preview https://jsfiddle.net/Ldu91at2/ And here is the code before adding a main div for border:-
<div style="display:inline-block; min-width:6.2cm; height:8.8cm; align: center;vertical-align: middle;" >
<img src="https://www.asurascans.com/wp-content/uploads/2020/10/56953.jpg" style="height:100%;">
</div>
<div style="display:inline-block;vertical-align: top;">
<span id="title">advertishement</span>
</div>
This is the css style you are using for the .cont div
.cont{
width:fit-content;
border: 1px solid #eee;
padding: 10px;
color: #fff;
}
The
color: #fff;
rule makes your text white thus invisible against a white background. Consider removing it or using a different color. The code below will work.
.cont{
width:fit-content;
border: 1px solid #eee;
padding: 10px;
}
Alright so basically i've been searching for a way that when someone clicks a text , a scroll down menu drops down with basically more information ( Sort of like a read more ).
I little experience in Java or Jquery and im not even sure where the problem is wether it's in my functions.php or my script itself . I've done alot of research and tried alot of things but none seem to be able to help me out so i figured id make my own post .
Keep in my , i took most of the codes in templates given by other member and tried to modify the code so it works with my site, I am trying to accomplish something similar to this site : http://www.randomsnippets.com/2011/04/10/how-to-hide-show-or-toggle-your-div-with-jquery/ the second example where there are 3 boxes and only one shows up when you click on it, However mine will simply be text instead of boxes)
My Javascript file looks like this(as stated in comment idk what thechosenone is , my guess is when you select a box it is now known as the chosen one ) :
jQuery(document).ready(function (){
$('.newboxes').each(function(index) {
if ($(this).attr("id") == thechosenone) {
$(this).show(200);
}
else {
$(this).hide(600);
}
});
}(jQuery)
So i went ahead and modified my function.php and added these line of code :
add_action('wp_enqueue_scripts', 'showonlyone' );
function showonlyone() {
wp_enqueue_script('showonlyone', get_template_directory_uri() . "/js/showonlyone.js");
}
As for calling the java script into my wordpress page I have no idea how to do this . The template gave me something like this :
<table>
<tr>
<td>
<div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px; width: 150px;">
<a id="myHeader1" href="javascript:showonlyone('newboxes1');" >show this one only</a>
</div>
<div class="newboxes" id="newboxes1" style="border: 1px solid black; background-color: #CCCCCC; display: block;padding: 5px; width: 150px;">Div #1</div>
</td>
<td>
<div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px; width: 150px;">
<a id="myHeader2" href="javascript:showonlyone('newboxes2');" >show this one only</a>
</div>
<div class="newboxes" id="newboxes2" style="border: 1px solid black; background-color: #CCCCCC; display: none;padding: 5px; width: 150px;">Div #2</div>
</td>
<td>
<div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px; width: 150px;">
<a id="myHeader3" href="javascript:showonlyone('newboxes3');" >show this one only</a>
</div>
<div class="newboxes" id="newboxes3" style="border: 1px solid black; background-color: #CCCCCC; display: none;padding: 5px; width: 150px;">Div #3</div>
</td>
</tr>
</table>
Can someone please tell me how im supposed to be calling this function and add it to a block of text ? I just want that when someone clicks on it , this box or whatever, drops down and displays additional information and when you click on another line of text this window will scroll back up and the other one will drop down .
Took me a minute but here you go:
http://jsfiddle.net/V4DTZ/
Now, for whats going on in the code:
<table>
<tr>
<td>
<div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px; width: 150px;">
<a class="newboxes" href="#" id="newboxes1">show this one only</a>
</div>
<div class ="div_newboxes" id="div_newboxes1" style="border: 1px solid black; background-color: #CCCCCC; display: block;padding: 5px; width: 150px;">Div #1</div>
</td>
<td>
<div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px; width: 150px;">
<a class="newboxes" href="#" id="newboxes2" >show this one only</a>
</div>
<div class ="div_newboxes" id="div_newboxes2" style="border: 1px solid black; background-color: #CCCCCC; display: none;padding: 5px; width: 150px;">Div #2</div>
</td>
<td>
<div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px; width: 150px;">
<a class="newboxes" href="#" id="newboxes3" >show this one only</a>
</div>
<div class ="div_newboxes" id="div_newboxes3" style="border: 1px solid black; background-color: #CCCCCC; display: none;padding: 5px; width: 150px;">Div #3</div>
</td>
</tr>
You'll see that I changed the id of the links to their corresponding div, and I added a div_ prefix on the ids of the div.
This way we have an easy way to select the div that matches with the link
I gave all of the links the same class, so that we can set up one onclick event for all of the links.
All of the div that contain your content also has the same class, so we can toggle them all at once.
Here is the jquery:
jQuery(document).ready(function (){
$('.newboxes').on('click', function(){
var div_id = "#div_" + $(this).prop('id');
$('.div_newboxes').each(function(i, value){
if($(value).prop('id')=== $(div_id).prop('id')){
$(div_id).show(200);
}
else{
$(value).hide(600);
}
});
})
}(jQuery))
Note that because we used an onclick event for all elements with class = "newboxes"
we are now able to use this to refer to the specific calling element. There is now no need to have theChosenOne variable.
When document is ready, attach event handlers to all of the elements needed
The event handler that is called every time a click happens on these elements
Event Handler
var ShowHideBlocks = function(){
$('.newboxes').each(function(index) {
if ($(this).attr("id") == thechosenone) {
$(this).show(200);
}
else {
$(this).hide(600);
}
});
}
Attached to all interested elements
jQuery(document).ready(function (){
$('.newboxes').each(function(index) {
$(this).bind('click',function(){
thechosenone = $(this).attr(id); //thechosenone is a global variable
ShowHideBlocks(); // Invoke the showHide method as part of anonymous handler
});
}
});
}(jQuery)
How can you type inside a contentEditable div outside of a child contentEditable div without retaining the child's class, and without changing contenteditable to false.
FIDDLE
<div class ="container" contenteditable="true">
<span class="meatball" contenteditable="true">meatball</span>
</div>
Should be this:
<div class ="container" contenteditable="true">
<span class="meatball" contenteditable="true">meatball</span> spaghetti
</div>
Not this:
<div class ="container" contenteditable="true">
<span class="meatball" contenteditable="true">meatball spaghetti</span>
</div>
You should be able to click in the red box and type red.
<br><br>
<div class ="container" contenteditable="true">
<span class="meatball" id="meatball" contenteditable="true">meatball</span> spaghetti
</div>
<!-- will work with contenteditable="false" but then I can't type blue-->
css
#meatball{
border: 1px dashed blue;
color:blue;
padding: 0 30px 0 30px;
font-size:20px;
}
.container{
border: 1px dashed red;
color:red;
}
I changed a little bit of your code, maybe you can try this and I hope it helps you. :)
#meatball{
border: 1px dashed blue;
color:blue;
padding: 0 30px 0 30px;
font-size:20px;
position:absolute;
top: 0;
left: 0;
}
.wrapper{
position:relative;
}
.item{
line-height:30px;
min-height:30px;
}
.container{
border: 1px dashed red;
color:red;
padding-left: 150px;
}
<div class="wrapper">
<div class ="container item" contenteditable="true"></div>
<div class="meatball w_o_r_d_s item" id="meatball" contenteditable="true">meatball</div>
</div>
Like this, by adding an invisible character to trick the browser http://jsfiddle.net/bq6jQ/4/ . I also add an extra <span> to avoid a caret visual bug
This is in response to a question I asked - is it possible to create a fully customizable HTML + CSS checkbox without recourse to using JavaScript. One of the postulated solution is fine, although there is quite a complex style associated with each label/checkbox pair which means the use of :before and :after do not allow the placement of the checkbox into the right CSS div tag.
Its clearer here I think. Here is the previous question: Making custom checkboxes work with css - select or check not working.
How can I best achieve this with minimal disruption? Already this is a complex project with JavaScript and jQuery and the HTML is output ad rendered by a server - so it needs to be of the the form:
<label for="id_MyJobChoices_0">Agriculture
<div id="left" class="cell">
<div data-icon-name="chart" class="icon chart"></div>
</div>
<div id="center" class="cell">
<div class="option-text"></div>
</div>
<div id="right" class="cell">
<div class="option-checkbox">
<input id="id_MyJobChoices_0" name="MyJobChoices" type="checkbox" value="_AG" />
</div>
</div>
</label>
I hope this is what you're looking for. I hide the original button and add a span in the label and use CSS to style it to look like the button. But you could also use an image and set it as the background of the span to look like the button. You can put the span on either side of the label text. This works because the entire label is clickable for a radio button when you use the "for" attribute.
Here is a fiddle: http://jsfiddle.net/QhBrZ/1/
Html:
<div id="left" class="cell">
<div data-icon-name="chart" class="icon chart"></div>
</div>
<div id="center" class="cell">
<div class="option-text"></div>
</div>
<div id="right" class="cell">
<div class="option-checkbox">
<input id="id_MyJobChoices_0" name="MyJobChoices" type="checkbox" value="_AG" /><label for="id_MyJobChoices_0">Agriculture<span></span></label>
</div>
</div>
CSS:
input[type="checkbox"] {
display: none;
}
input[type="checkbox"] + label span {
display:inline-block;
width:13px;
height:13px;
margin:-3px 4px 0 0;
border-radius:10px;
border:1px solid #777;
vertical-align:middle;
box-shadow: 1px 1px 4px 0px rgba(0,0,0,.7) inset;
background-color: rgba(0,0,0,.5);
cursor:pointer;
}
input[type="checkbox"]:checked + label span {
box-shadow: 0px 0px 1px 3px rgba(0, 0, 0, 0.4) inset;
background-color: #29c6ff;
}
Say you have an image with float:left; and a text that flows around the image.
The code is pretty simple:
<img src="image.jpg" style="float:left">
<p style="outline: 1px dotted blue">Lorem ipsum...</p>
Is there a way to display an outline, that wraps around the text but not around the image. A normal outline on the text gives you this:
But I want this:
using a display:inline; on the <p> displays an outline on each line, not 'blockwise' oun the text's visible boundaries.
CSS3 is legit, any hardcore CSS/JS is permitted...
You can try something like this. Shift the image up and to the left so that it obscures the regular border. Then give it it's own border to complete the illusion.
<article>
<img src="image.jpg" style="float:left">
<p>Lorem ipsum...</p>
</article>
article {
border: 1px blue dotted;
}
img {
background-color: white;
border-right: 1px blue dotted;
border-bottom: 1px blue dotted;
margin: -1px 0 0 -1px;
padding: 0 5px 10px 0;
}
Here's the fiddle: http://jsfiddle.net/KW45t/
Check this jsfiddle http://jsfiddle.net/pollirrata/rKaHk/1/
It is not fancy but makes the job