Hello i have started to learn Javascript and i was wondering if there is a way to remove a specific attribute from the style here is an example that explain what i mean
<div id="divbrd" style="width:500px; height:350px; border:1px solid #000; box-shadow:10px 5px 10px #777;"></div>
this is a div tag with a style so if i want to remove the box-shadow from the style attribute how can i do this here is what i have done :
<script type="text/javascript">
var div_brd = document.getElementById("divbrd");
div_brd.removeAttribute("style","box-shadow");
</script>
correct me please ...
thanks
Try this
<script type="text/javascript">
var div_brd = document.getElementById("divbrd");
div_brd.style.boxShadow = "none";
</script>
Fiddle:
In this fiddle there is box shadow on div but it's removing from js
just in case if you want to learn jquery also.
$('#divbrd').css("box-shadow", "");
this will remove the attribute
<script type="text/javascript">
var div_brd = $("#divbrd");
div_brd.style.boxShadow = "none";
</script>
OR
<script type="text/javascript">
$('#divbrd').css("box-shadow", "none");
</script>
Related
I am looking for javascript command that would do the following:
Click on image -> open spoiler
Click on image again -> hide spoiler
Here is what I got so far:
javascript in my html
<script>
function myFunction() {
document.getElementById("prvy").innerHTML = document.getElementById('spoiler_id').style.display='';}
</script>
Spoiler
<a id="show_id"
onclick="document.getElementById('spoiler_id').style.display=''; document.getElementById('show_id').style.display='none';"
class="link"></a><span id="spoiler_id"
style="display: none">[Show]<button onclick="document.getElementById('spoiler_id').style.display='none';
document.getElementById('show_id').style.display='';"
class="link">[Hide]</button>
<br><h1 id="bz">Heading</h1><br><br><p>text</p></span>
And my button:
<div id="prvy" onclick="myFunction()"></div>
What I managed to do, is to click on a image, wich will open spoiler. Hovewer, I've been unable to do the second part, onclick again it will close the spoiler.
I also did serach for solution alredy, nothing worked for me, not even this: Link
I also tired if{} else{} statement but didn't work for me either.
Help would be really appreciated, as I am getting desperate on this one.
You can use jQuery .toggle() to toggle show/hide
$("#prvy").click(function() {
$("#spoiler_id").toggle();
});
Note : You need to include jQuery in your document as
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Working snippet :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="show_id"
onclick="document.getElementById('spoiler_id').style.display=''; document.getElementById('show_id').style.display='none';"
class="link"></a><span id="spoiler_id"
style="display: none">[Show]<button onclick="document.getElementById('spoiler_id').style.display='none';
document.getElementById('show_id').style.display='';"
class="link">[Hide]</button>
<br><h1 id="bz">Heading</h1><br><br><p>text</p></span>
<div id="prvy" onclick="myFunction()">button</div>
<script>
$("#prvy").click(function() {
$("#spoiler_id").toggle();
});
</script>
In the JavaScript where you click the button use the simple jQuery function toggle.
$('#spoiler_id').toggle();
Toggle will hide the element selected if it is currently shown or display the element if it is currently hidden.
you would need some state that flips when the function is called.
like this.
<script>
var state = false;
function myFunction() {
state = !state;
if(state){
//do something
}else{
//do something else
}
}
</script>
Is that all of your code, it would be easier for you and less confusing too if you just gave the buttons an on click function and then called that function in your js.
Can I see all of your html
I am giving an example to concerned question using javascript.
HTML:
<script type="text/javascript">
var permit = 'true';
function showhide() {
var getcont = document.getElementsByClassName('hidshowcont');
if (permit === 'true') {
permit = 'false';
getcont[0].style.display = 'block';
}
else {
permit = 'true';
getcont[0].style.display = 'none';
}
}
</script>
<style type="text/css">
.hidshowcont{
height: 200px;
width: 300px;
border: 1px solid #333333;
display: none;
}
</style>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR1cSDTn18ufwjuMihttTvCPJOnFY-4hxbPcaOVd87nSPaQakbP9IERaQ" />
<br />
<br />
<div class="hidshowcont">
This is an example of hide and show the container by clicking of an image.
</div>
This will help u much
I want to hide a div if javascript is turned off and show that div if javascript enabled but I don't want to use <noscript> as in chrome and opera it has some issues. So what I am doing is something like this:
<div id="box" style="display:none"></div>
<script type="text/javascript">
document.getElementById("box").style.visibility = "visible";
</script>
But the javascript part does not show the div. How can I make it visible is javascript is enabled. Also tried $('#box').show(); but that too didn't work.
Use style.display
document.getElementById("box").style.display = "block";
You need to set the attribute display to block
document.getElementById("box").style.display = "block";
You are trying to toggle between visibility, which is similar, but a different property.
You are using display: none, not visibility: hidden.
Solution add visibility: hidden instead of display none if you want to use that instead of display. They work a little different.
You can set:
<div id='box' style='display: none;'>...</div>
And in your script code:
document.getElementById('box').style.display = 'block';
change display to visibility
<div id="box" style="visibility:none"></div>
<script type="text/javascript">
document.getElementById("box").style.visibility = "visible";
</script>
or change js
<div id="box" style="display:none"></div>
<script type="text/javascript">
document.getElementById("box").style.display = "block";
</script>
You could also use a mix of CSS and Javascript to accomplish this:
HTML/Javascript
<script type="text/javascript">
document.documentElement.className += 'js-ready';
</script>
CSS
div#box { display: none; }
.js-ready div#box { display: block !important; }
I'm a complete noob when it comes to javascript. Would there be anyway to change an image after it is clicked, some way to trigger a js function to change the css. It would have to be triggered by an event and something other than onclick, onfocus probably.
<style>
#pic {
width:100px;
height:100px;
}
</style>
</head>
<body>
<img src='nope.jpg' id='pic' onclick="mouseOver()"></img>
<script type='text/javascript'>
function mouseOver() {
document.getElementById('pic').style.width="400px";
document.getElementById('pic').style.height="400px";
}
</script>
try this...
function mouseOver() {
document.getElementById('image').style.height = "400px";
}
First i edited the question , because the function was not defined correctly .
Second :
to access the height property of any element , you should use style.height , and should add "px" to the value.
please spend more time searching for answers , instead of posting a new question.
Change the JS to this:
var image = document.getElementById('image');
function mouseOver() {
image.style.height="600px";
}
image.onclick = mouseOver;
Setting values you can use directly style attribute, but remember that asking for them is a greater problem:
Please refer to this one:
Get a CSS value with JavaScript
This should work
<style>
#pic {
width:100px;
height:100px;
}
</style>
</head>
<body>
<img
width="100"
onmouseOver="this.width=400; this.height=400"
onclick="this.width=100"
alt="RESIZE IMAGE"
id='pic'
src='nope.jpg'
/>
just copy and edit the image tag code as needed
I want to Change the background colour on click . This is my code work that i tried.pls help me out :)
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
$(document).ready(function(){
$(#co).click(change()
{
$(body).css("background-color":"blue");
});
});
Css code
body
{
background-color:red;
}
Body code
<body>
<div id="co" click="change()">
hello
</div>
You're using a colon instead of a comma. Try:
$(body).css("background-color","blue");
You also need to wrap the id in quotes or it will look for a variable called #co
$("#co").click(change()
There are many more issues here. click isn't an HTML attribute. You want onclick (which is redundant). Try this:
<div id="co"> <!-- no onclick method needed -->
<script>
$(document).ready(function() {
$("#co").click(function() {
$("body").css("background-color","blue"); //edit, body must be in quotes!
});
});
</script>
You were trying to call an undefined method. It looks like you were trying to declare it inside the callback statement? I'm not sure. But please compare this to your code and see the differences.
http://jsfiddle.net/CLwE5/ demo fiddle
Try this
$("body").css({"background-color":"blue"});
$("#co").click(function(){
$(this).css({"backgroundColor" : "blue"});
});
The code below will change the div to blue.
<script>
$(document).ready(function(){
$("#co").click({
$("body").css("background-color","blue");
});
});
</script>
<body>
<div id="co">hello</div>
</body>
1.Remove onclick method from div element
2.Remove function change() from jQuery code and in place of that create an anonymous function like:
$(document).ready(function()
{
$('#co').click(function()
{
$('body').css('background-color','blue');
});
});
$("#bchange").click(function() {
$("body, this").css("background-color","yellow");
});
Change Background Color using on click button jquery
Below is the code of jquery, which you can put in your head tag.
jQuery Code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").addClass("myclass");
});
});
</script>
CSS Code:
<style>
.myclass {
background-color: red;
padding: 100px;
color: #fff;
}
</style>
HTML Code:
<body>
<div>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
<button>Click Here</button>
</body>
Try below jQuery snippet, you can change color :
<script type="text/javascript">
$(document).ready(function(){
$("#co").click(function() {
$("body").css("background-color", "yellow");
});
});
</script>
$(document).ready(function(){
$("#co").click(function() {
$("body").css("background-color", "yellow");
});
});
body {
background-color:red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="co" click="change()">hello</div>
I'd like to be able to convert specific textareas on a page to be ACE editors.
Does anyone have any pointers please?
EDIT:
I have the the editor.html file working with one textarea, but as soon as I add a second, the second isn't converted to an editor.
EDIT 2:
I decided to scrap the idea of having several, and instead open one up in a new window. My new predicament is that when I hide() and show() the textarea, the display goes awry. Any ideas?
As far as I understood the idea of Ace, you shouldn't make a textarea an Ace editor itself. You should create an additional div and update textarea using .getSession() function instead.
html
<textarea name="description"/>
<div id="description"/>
js
var editor = ace.edit("description");
var textarea = $('textarea[name="description"]').hide();
editor.getSession().setValue(textarea.val());
editor.getSession().on('change', function(){
textarea.val(editor.getSession().getValue());
});
or just call
textarea.val(editor.getSession().getValue());
only when you submit the form with the given textarea. I'm not sure whether this is the right way to use Ace, but it's the way it is used on GitHub.
Duncansmart has a pretty awesome solution on his github page, progressive-ace which demonstrates one simple way to hook up an ACE editor to your page.
Basically we get all <textarea> elements with the data-editor attribute and convert each to an ACE editor. The example also sets some properties which you should customize to your liking, and demonstrates how you can use data attributes to set properties per element like showing and hiding the gutter with data-gutter.
// Hook up ACE editor to all textareas with data-editor attribute
$(function() {
$('textarea[data-editor]').each(function() {
var textarea = $(this);
var mode = textarea.data('editor');
var editDiv = $('<div>', {
position: 'absolute',
width: textarea.width(),
height: textarea.height(),
'class': textarea.attr('class')
}).insertBefore(textarea);
textarea.css('display', 'none');
var editor = ace.edit(editDiv[0]);
editor.renderer.setShowGutter(textarea.data('gutter'));
editor.getSession().setValue(textarea.val());
editor.getSession().setMode("ace/mode/" + mode);
editor.setTheme("ace/theme/idle_fingers");
// copy back to textarea on form submit...
textarea.closest('form').submit(function() {
textarea.val(editor.getSession().getValue());
})
});
});
textarea {
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.9/ace.js"></script>
<textarea name="my-xml-editor" data-editor="xml" data-gutter="1" rows="15"></textarea>
<br>
<textarea name="my-markdown-editor" data-editor="markdown" data-gutter="0" rows="15"></textarea>
You can have multiple Ace Editors. Just give each textarea an ID and create an Ace Editor for both IDS like so:
<style>
#editor, #editor2 {
position: absolute;
width: 600px;
height: 400px;
}
</style>
<div style="position:relative; height: 450px; " >
<div id="editor">some text</div>
</div>
<div style="position:relative; height: 450px; " >
<div id="editor2">some text</div>
</div>
<script src="ace.js" type="text/javascript" charset="utf-8"></script>
<script src="theme-twilight.js" type="text/javascript" charset="utf-8"></script>
<script src="mode-xml.js" type="text/javascript" charset="utf-8"></script>
<script>
window.onload = function() {
var editor = ace.edit("editor");
editor.setTheme("ace/theme/twilight");
var XmlMode = require("ace/mode/xml").Mode;
editor.getSession().setMode(new XmlMode());
var editor2 = ace.edit("editor2");
editor2.setTheme("ace/theme/twilight");
editor2.getSession().setMode(new XmlMode());
};
</script>
To create an editor just do:
HTML:
<textarea id="code1"></textarea>
<textarea id="code2"></textarea>
JS:
var editor1 = ace.edit('code1');
var editor2 = ace.edit('code2');
editor1.getSession().setValue("this text will be in the first editor");
editor2.getSession().setValue("and this in the second");
CSS:
#code1, code2 {
position: absolute;
width: 400px;
height: 50px;
}
They must be explicitly positioned and sized. By show() and hide() I believe you are referring to the jQuery functions. I'm not sure exactly how they do it, but it cannot modify the space it takes up in the DOM. I hide and show using:
$('#code1').css('visibility', 'visible');
$('#code2').css('visibility', 'hidden');
If you use the css property 'display' it will not work.
Check out the wiki here for how to add themes, modes, etc... https://github.com/ajaxorg/ace/wiki/Embedding---API
Note: they do not have to be textareas, they can be whatever element you want.
For anyone that just wants a minimal, working example of using Ace from the CDN:
<!DOCTYPE html>
<html lang="en">
<body style="margin:0">
<div id="editor">function () {
console.log('this is a demo, try typing!')
}
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.1.01/ace.js" type="text/javascript" charset="utf-8"></script>
<script>
var editor = ace.edit("editor");
editor.setTheme("ace/theme/monokai");
editor.getSession().setMode("ace/mode/javascript");
document.getElementById("editor").style.height = "120px";
</script>
</body>
</html>