hello I need to do it only in javascript (not in jquery)
How would you do something equivalent in javascript something like this in query?
<body>
<div class="wysiwyg">text......text...</div>
<div class="btn btn-primary verMas">Ver más</div>
<script>
$('.verMas').click(function(e){
e.preventDefault();
$('.wysiwyg').css('height','auto');
$(this).hide();
$('.layerMiddle').hide();
});
</script></body>
Your example suggests that you need to be able to
Select Items from the DOM
Add an on-click event listener
Modify the display state of elements
Looking at how you might achieve these in native JS then I would suggest the following:
document.querySelector()
This provides some similar functionality to JQuery's selectors - at least for this use case.
element.addEventListener('click', function)
This provides equivalent functionality as JQuery's $('').click(function)
element.style
This enables modification of the in-line style of the element so setting the style of display to none can achieve this
Putting these all together:
// use querySelector to get the .verMas element and add on-click event listener
document.querySelector('.verMas').addEventListener('click', e => {
// prevent default event
e.preventDefault()
// use querySelector to get the .wysiwyg element
// set the style.height parameter to auto
document.querySelector('.wysiwyg').style.height = 'auto'
// e.target is the element that this event was fired on
// to hide it, set the style.display parameter to none
e.target.style.display = 'none'
// use querySelector to get the .layerMiddle element
//hide the layerMiddle Element
document.querySelector('.layerMiddle').style.display = 'none'
})
div {
padding: 10px;
}
.btn{
display: inline-block;
padding: 6px 12px;
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
border: 1px solid transparent;
border-radius: 4px;
color: #333;
background-color: #fff;
border-color: #ccc;
}
<div class="wysiwyg">text......text...</div>
<div class="layerMiddle">[Layer Middle]</div>
<div class="btn btn-primary verMas">Ver más</div>
Related
Whenever I click on the left arrow icon, I want the style of the menu to change. Is it possible to bind specific css style when using onclick function?
i.fas.fa-chevron-circle-left.left
#sidebar-container .menu
width: 18rem
transition: 200ms
How I want it to look after onclick function.
#sidebar-container .menu
width: 10rem
Make a class containing the styles you want and you can toggle those on and off using javascript:
document.getElementById('my-element').classList.toggle('my-class');
This will add the my-class class if the element doesnt have it, and remove the my-class class if the element does have it. You may also use classList.add and classList.remove if you'd like to set it on or off.
You can easily bind this to a button with inline javascript. It is recomended to use event listeners but this should do the trick:
<button onclick="document.getElementById('my-element').classList.toggle('my-class')">Click me to toggle the class</button>
You can change my-elemment to be the ID of the element you want to toggle the class for and my-class to the classname you'd like to use.
It is possible to bind to an element. You can use document.querySelector() to find that element.
for example:
const el = document.querySelector("i.fas.fa-chevron-circle-left.left")
el.addEventListener("click", function(){
el.style.transition = "";
});
It's almost always easier to just add an overriding class instead of editing single style properties:
el.classList.add("override");
and have that class in css somewhere.
.override {
transition: none !important;
}
You can create a secondary class for styles you want when it is clicked. You can toggle the class like this
const menu = document.querySelector("#sidebar-container .menu");
menu.addEventListener('click', function () {
// by adding class name
menu.classList.toggle("menu-clicked");
});
#sidebar-container {
width: 200px;
height: 100vh;
background: #ccc;
display: flex;
padding-top: 20px;
align-items: flex-start;
justify-content: center;
transition: all ease 200ms;
}
#sidebar-container .menu {
background: #ddd;
padding: 20px;
display: block;
width: 100%;
cursor: pointer;
}
#sidebar-container .menu.menu-clicked {
background: green;
}
<div id="sidebar-container">
<div class="menu">
Menu
</div>
</div>
Hope it helps. Cheers!
I have an DOM element and I want to only change the className of the element. I want to remain the css values as it. (For both external css and inline css)
For example, if I have this:
.sample{
display: block
font-size: 10px,
font-color: #fff
}
<div class="sample">...</div>
After doing some JavaScript operation I need to reach this:
.newCss{
display: block
font-size: 10px,
font-color: #fff
}
<div class="newCss">...</div>
Note: There is no strict rule for css, there can be a css selector with 100 values or with only 1 one.
Note2: There is no css selector such as .newCss, I should transform the css properties from .sample, to a new one called .newCss
You can get the computed style for the element prior to making the change:
const style = getComputedStyle(theElement);
and then apply that styling to the element directly:
theElement.style.cssText = style.cssText;
Then removing the class won't change the element's styling, because it's styled inline.
Example:
const theElement = document.querySelector(".sample");
console.log("before:", theElement.className);
setTimeout(() => {
const cssText = getComputedStyle(theElement).cssText;
theElement.className = "newCss";
theElement.style.cssText = cssText;
console.log("after: ", theElement.className);
}, 800);
.sample{
display: block;
font-size: 10px;
color: #fff;
background-color: black;
}
.newCss {
background-color: yellow;
}
<div class="sample">this is the div</div>
If the new class has styling associated with it in CSS, that might affect the styling of the element. If you need to prevent that, change the class first, then assign the CSS text:
Example:
const theElement = document.querySelector(".sample");
console.log("before:", theElement.className);
setTimeout(() => {
theElement.style.cssText = getComputedStyle(theElement).cssText;
theElement.className = "newCss";
console.log("after: ", theElement.className);
}, 800);
.sample{
display: block;
font-size: 10px;
color: #fff;
background-color: black;
}
<div class="sample">this is the div</div>
You have to use JavaScript. In order to use JavaScript, you have to assign a ID to the <div> tag. Then manipulate it by JavaScript. Example: document.getElementById("id1").className="sample";
Also make sure that you using semicolon(;) after CSS properties.
function f1()
{
document.getElementById("id1").className="sample";
}
.sample{
display: block;
font-size: 10px;
font-color: #fff;
color: red;
}
.newCss{
display: block;
font-size: 10px;
font-color: #fff;
color: green;
}
<div id='id1' class="newCss"><p>Hello</p></div>
<button onclick="f1()">Click</button>
Well, if you want to change className to a class which is identical, you can simply redefine the class in the style sheet to be equivalent, or you can use inline styles, but the purpose of CSS classes is to keep a unique set of rules, so two identically-ruled CSS classes would defeat the purpose for which they exist, to be unique definitions of CSS rules, so if you want the CSS rules exactly the same, then there wouldn't be a reason to change the className, unless you were referencing it with other JavaScript functions, or if you wanted to add additional styles while keeping the old ones, in such a case:
use classList to dynamically add or remove certain individual classes, while keeping others.
The following div is part of my body:
<div id="errorSection" class="alert alert-danger"> Error: Location could not be found.</div>
<br>
I have this div styled as follows:
#errorSection{
visibility: hidden;
text-align: center;
font-style: bold;
font-size: 14pt;
max-width: 400px;
margin-left: auto;
margin-right: auto;
}
How can I make this appear using jQuery when calling the following function. The way I have it now is calling an error.
function noLocation(){
$('#errorSection').style.visibility.visible;
}
Keeping your declared CSS would be:
$('#errorSection').css('visibility', 'visible');
But I'd advise you to use an extra CSS declaration like this:
#errorSection.showError {
visibility: visible;
}
$('#errorSection').addClass('showError');
This means you can change your CSS in the future to use display: none; (or even height: 0; or position: absolute; left: -99999;) and not have to modify your JavaScript (Separation of concerns)
Simple. You are mixing straight Javascript and jQuery, which does not work.
If using the 'visibility' property and not the 'display'
You should do.
function noLocation(){
$('#errorSection').css("visibility", "visible");
}
or
function noLocation(){
$('#errorSection').css({"visibility": "visible", "text-align": "center",
"font-style": "bold"}); //can use comma delimited properties like in a css file sheet in the {} brackets.
}
The visibility issue has been dealt with in other posts and personally I would add / remove a class like #DJDaveMark suggests, but there is a built in toggle function in jquery that is useful- so this is to provide an alternative: simply start out with the element hidden, and then on the click of the button - use toggle() to toggle the display.
I have used a named function so that you can easily use this in your existing code, but you can just as easily put the toggle into the click handler of an element like the button that I have put in here.
$('#togglevisibility').click(function(){
toggleVisibility();
})
function toggleVisibility() {
$('#errorSection').toggle();
}
#errorSection{
display:none;
text-align: center;
font-style: bold;
font-size: 14pt;
max-width: 400px;
margin-left: auto;
margin-right: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="togglevisibility">Click Me To Toggle Visibility</button>
<hr/>
<div id="errorSection" class="alert alert-danger"> Error: Location could not be found.</div>
Different ways in jQuery, couple of them below:
1) Use of css function
Show: $('#errorSection').css("display", "inline") different values can be here like inline, block, inline-block
Hide: $('#errorSection').css("display", "none")
2) Or you can use show and hide
Show: $('#errorSection').show()
Hide: $('#errorSection').hide()
3) Having css class and you can toggle to make show/hide effect:
.error {
display: inline; #or whatever like block, inline-block based on your design
}
Show/Hide can be triggered using:
$('#errorSection').toggleClass( "error" );
I have the following jQuery, CSS and HTML lines:
$("#button").click(function(){
$("#main").data("ot", "test");
});
#main {
display: inline-block;
background-color: red;
padding: 4px;
width: 230px;
text-align: center;
}
#button {
display: inline-block;
padding: 4px;
background-color: green;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main" data-ot="tooltip content" data-ot-delay="0">Div Content (Tooltip Trigger)</div>
<div id="button">Change data-ot to test</div>
OBS: The HTML attribute data-ot is where the tooltip gets the content from...
What I've been trying to do is change the attribute data-ot from it's initial to "test", as shown in the jQuery lines at the snippet.
I even tried using $('#main').attr('data-ot', 'test'); and when I inspect the element in the page it seems to have changed, but the tooltip doesn't recognize the change. During my searches I read that data() and attr() shouldn't be used together for the same porpoise because there might be some conflicts, so I guess that explains why...
I'm really lost on this, any ideas?
As per the plugin documentation you can set or change the attrbutes dynamically.
You can add this code:
var myOpentip = new Opentip($("#main"));
myOpentip.setContent("First Content");
$("#button").click(function() {
myOpentip.setContent("New content");
});
Also, you need to remove data-ot attribute from HTML.
JSFIddle: https://jsfiddle.net/kalimahapps/gu8tu2ev/1/
tooltip value is set when document is built.so if you change it later it will not change the value.
I'm creating a simple button (sort of) for a user to iterate through a number of selections when clicking "up" or "down".
I'm using jQuery to check after each click that there are more things up (or down) and updating the classes / styles / selections accordingly. However if I change the class of the element that is triggering the "on" function, it is still triggering (on click) even though all the classes specified in the selector are not there (in the DOM) any more.
In this simplified example if you click the "i.up.enabled" element then it's class switches ".up.disabled" and the visible field changes. Fine so far. However, if you click it again then it updates again, which it shouldn't(?) as the selector used to call the 'on' function is "i.up.enabled" and not "i.up.disabled". It's reasonably simple to work round this but I wondered why this is?
Does "on" read from the source rather than the DOM & is there a more accepted way doing this?
HTML
<div class="wrapper">
<div data-state="1">Number 1</div>
<div data-state="0">Number 2</div>
<i class="up enabled">up</i>
</div>
CSS
i {
cursor: pointer;
}
div[data-state="0"] {
display: none;
padding: 0 2rem;
border: 1px solid gray;
}
div[data-state="1"] {
padding: 0 2rem;
border: 1px solid gray;
}
.wrapper > * {
display: inline-block;
font-size: 90%;
}
i.disabled {
color: gray;
cursor: default;
}
i.enabled {
color: blue;
cursor: pointer;
}
JavaScript / jQuery
$('.wrapper i.enabled.up').on('click', function(){
var $current = $(this).siblings('div[data-state="1"]');
var $next = $(this).siblings('div[data-state="0"]');
$current.attr('data-state', 0)
$(this).addClass('disabled').removeClass('enabled');
$next.attr('data-state', 1);
});
And the fiddle is here
N.B. I appreciate that .data() is better for manipulating data-* elements, but due to restrictions I have to use attr("data-*", [value])
Currently what you are using is called a "direct" binding which will only attach to element that exist on the page at the time your code makes the event binding call.
Its does't matter even if selector is modified, Event will still be attached with these elements when using "direct" binding.
You need to use Event Delegation using .on() delegated-events approach, when generating elements dynamically or manipulation selector (like removing and adding classes).
General Syntax
$(staticParentElement).on('event','selector',callback_function)
Example
$('.wrapper').on('click', 'i.enabled.up', function(){
});
DEMO
You can remove the event inside the on function using $(this).off("click");:
$('.wrapper i.enabled.up').on('click', function(e) {
var $current = $(this).siblings('div[data-state="1"]');
var $next = $(this).siblings('div[data-state="0"]');
$current.attr('data-state', 0)
$(this).addClass('disabled').removeClass('enabled');
$next.attr('data-state', 1);
$(this).off("click");
});
i {
cursor: pointer;
}
div[data-state="0"] {
display: none;
padding: 0 2rem;
border: 1px solid gray;
}
div[data-state="1"] {
padding: 0 2rem;
border: 1px solid gray;
}
.wrapper > * {
display: inline-block;
font-size: 90%;
}
i.disabled {
color: gray;
cursor: default;
}
i.enabled {
color: blue;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div data-state="1">Number 1</div>
<div data-state="0">Number 2</div>
<i class="up enabled">up</i>
</div>