I wonder if this possible, let's say I have controller which returns me some parameters, let's called module, so I basically generate html content based on this, and this refresh each certain amount of time via ajax.
So, one of the properties is an alert, if alert is true, I add a class to the element, let's called it warning, so at the end, it generates something like this:
<div class="mod1"></div>
<div class="mod2"></div>
<div class="mod3"></div>
<div class="mod4"></div>
<div class="mod5 warning"></div>
If there any chance to place the divs with the warning class on top only using javascript???
Any adviced would be appreciated.
Regards.
If you are using jquery, this is a one approach:
CodePen
HTML:
<div id="messages">
<div class='message'> message 1</div>
<div class='message'> message 2</div>
<div class='message'> message 3</div>
<div class='message warning'> message 4</div>
<div class='message warning'> message 5</div>
</div>
JavaScript:
$(function(){
var clones = $('div.warning');
$('div.warning').remove();
$('#messages').prepend(clones);
})
Related
I have the following HTML, with scrollbar:
<div id="parent">
<div id="child1">Something</div>
<div id="child2">Something</div>
<div id="child3">Something</div>
<div id="child4">Something</div>
<div id="child5">Something</div>
<div id="child6">Something</div>
<div id="child7">Something</div>
<div id="child8">Something</div>
<div id="child9">Something</div>
</div>
My question is this:
How can I, in pure javascript, position the scroll of the div 'parent' in one of the childs?
You can use the scrollIntoView function of JavaScript like this:
document.getElementById('child9').scrollIntoView()
Try it online
I am having trouble with a little site I have been working on; I want a sort of "stream" container that holds "cards" of "content," where this "content" is some "text" as well as some "stats."
This is the HTML I currently have:
<div id="stream">
<div class="card">
<div class="content">content
<div class="text">
blahblahblah
</div>
<div class="stats">
blahblahblah
</div>
</div>
</div>
<div class="card">
<div class="content">content
<div class="text">
blahblahblah
</div>
<div class="stats">
blahblahblah
</div>
</div>
</div>
<div class="card">
<div class="content">content
<div class="text">
blahblahblah
</div>
<div class="stats">
blahblahblah
</div>
</div>
</div>
</div>
Eventually, I want users to be able to prepend "cards" to this "stream" as well.
Now, however, I am trying to implement some jQuery function to hide the "stats" of a card until it is clicked on. So after setting display to none in CSS of the stats, I made this in a javascript file:
$(document).ready(function(){
$("#stream, div.card").click(function() {
$(this).find($("div.stats")).show();
});
});
It sort of works; the stats of a card are hidden until I click on a card. When I click on a card, however, all the cards' stats divs are shown.
I was hoping to somehow make it that the specific card clicked is also the (only) one that gets shown. Obviously, the current way I am doing this opens all of them as jQuery I have selects all the cards at once; how can I remedy this?
Again, I apologize if this question has been asked; I could not seem to find something similar, and I really want this to work . . .
P.S. I tried to search for this particular instance; alot of suggestions were to just give divs ids, but this feels inconvenient when I eventually want users to prepend cards?
Your selector ->
"#stream, div.card"
was basically asking for all #stream and all div.card..
But what you really meant was, find all div.card inside #stream. and this would be, (aka without the ,).
"#stream div.card"
Also you jquery find doesn't require you to convert into a jquery object, so find("div.stats") will do the trick.
I'm creating a website and I'm having some trouble with javascript. I have this function:
function offerboxclick(obj) {
obj.classList.toggle("menuelementclicked");
}
and my html looks like this:
<div class="menuelement" onclick="offerboxclick(this)">
<div class="arrowbox">
<div class="stripe1"></div>
<div class="stripe2"></div>
</div>
<div class="menutext">Menu level 0</div>
<level>
<div class="menuelement" onclick="offerboxclick(this)">
<div class="arrowbox">
<div class="stripe1"></div>
<div class="stripe2"></div>
</div>
<div class="menutext">Menu level 1</div>
</div>
<div class="menuelement" onclick="offerboxclick(this)">
<div class="arrowbox">
<div class="stripe1"></div>
<div class="stripe2"></div>
</div>
<div class="menutext">Menu level 1</div>
</div>
</level>
</div>
<div class="menuelement" onclick="offerboxclick(this)">
<div class="arrowbox">
<div class="stripe1"></div>
<div class="stripe2"></div>
</div>
<div class="menutext">Menu level 0</div>
</div>
The css code I think isn't relevant, because the problem is probably with the js function. As you can see, I have a multi level menu, and it works just fine when I'm clicking on the level 0 element to show hidden level 1 elements. But when I click any of the level 1 elements, the js function does work properly on the object, because it toggles "menuelementclicked" class on it. The problem is that it also toggles this class in parent menu element, so at the same time it opens level 2 and closes whole menu. I don't really know what to do now. Any help would be appreciated!
P.S. I tried putting my code on jsfiddle to show you all of it but for some reason on it doesn't work there at all 0_o
I am having trouble trying to figure out how to show a specific item when clicking on a specific button and then hiding the other siblings.
So, what I have is 6 buttons.
Service 1-6
If someone would click on service 1, I would want my service-display-box section to appear (I have it set as display:none on page load) and then for just the Service 1 content to appear.
The way I have it now, it hides the sibling buttons I have and doesn't show the service-display-box or any of the service areas.
I have included a fiddle below.
Service buttons - When you click on Service 1
<div id="service-tabs-container">
<div class="service-tab-block" id="service_tab1">Service 1</div>
<div class="service-tab-block" id="service_tab2">Service 2</div>
<div class="service-tab-block" id="service_tab3">Service 3</div>
<div class="service-tab-block" id="service_tab4">Service 4</div>
<div class="service-tab-block" id="service_tab5">Service 5</div>
<div class="service-tab-block" id="service_tab6">Service 6</div>
</div>
</div>
I want to show this:
<div class="service-item-box" id="service1">
<div class="service-item-title">Service 1</div>
</div>
Fiddle
You will need to get the number from the id on the service tab you want, then append that to the id of the service item box:
$('.service-tab-block').click(function() {
$('.service-tab-block').css({"background":"purple"});
$(this).css({"background":"#000", "color":"#FFF"});
//To get the service display box to show
var item_number = $(this).attr('id').replace('service_tab', '');
$('#service-display-box').show();
$('#service'+item_number).show().siblings().hide();
})
https://jsfiddle.net/esayoaqg/1/
I am trying to populate an array in JavaScript using jQuery. I have some <div> elements in a <section> and I only want the <div> elements that are visible (via CSS property display: block) to be added to the array.
HTML:
<section id="container">
<div>shows up 1</div>
<div style="display:none">doesn't show 2</div>
<div>shows up 3</div>
<div style="display:none">doesn't show 4</div>
<div style="display:none">doesn't show 5</div>
<div>shows up 6</div>
<div>shows up 7</div>
<div>shows up 8</div>
<div style="display:none">doesn't show 9</div>
<div>shows up 10</div>
</section>
JavaScript / jQuery
var mainList = $("#container div");
This currently gets ALL <div> elements regardless of their display. Is there some kind of filter I can put onto this call to get only the elements that are visible? It should only return the 6 <div> elements that say "shows up" in them.
Fiddle: http://jsfiddle.net/259chbj4/
Note: For this, I can't use a class that has display: none. I am looking for a solution that only modifies the JavaScript.
You can simply use the :visible selector.
$("#container div:visible");
try:
var mainList = $('#container').find("div :visible");