I am trying to add a child css class to a parent css class for a drop down menu. When the user clicks on the parent css class called .linkBox it brings up a drop down list. The child css class that needs to appear is a css generated arrow. I have the arrow centered, but everything I've tried to get the arrow to appear hasn't worked. I have to use both as css classes, they cannot be IDs. The second part of this is that the arrow will only effect the first and third box in the header. The other issue is that the project calls for the use of PrimeFaces and I think that might be part of what is throwing me off. This is what I have so far-
$('.linkBox').hover (function () {
$(this).parent('.linkBox').children('p').addClass("ddArrow");
},function () {
$(this).parent('.linkBox').children('p').removeClass("ddArrow");
}
);
The PrimeFaces code is-
<p:panel id="profileDropDown" styleClass="linkBox profileBox">
Help I've been stuck on this for days!
Thank you!!!!
Related
New question:
So, im looking for a way to toggle the display of two css classes called hotel-in and hotel-out.
These two classes will be in all of my 22 components.
To toggle the display, im using a variable called inHotel that contains wherever the user is in a hotel or not.
when the variable is true, the hotel-in will be visible, and hotel-out be hidden.
when the variable is false, the hotel-out will be visible, and hotel-in be hidden.
How can i achieve this in the best manner?
Is it something general i could do in my main controller, that loads all the components?
Or do i have to do something spesific in every of the 22+ controllers?
Old question:
IN My main app component, where i have router outlets, i have the following:
<style *ngIf="inHotel">
.hotel-in {
display:block;
}
.hotel-out {
display:none;
}
</style>
<style *ngIf="inHotel == false">
.hotel-in {
display:none;
}
.hotel-out {
display:block;
}
</style>
but when checking, even when that the inhotel is false, it dosent create that style.
The idea is that a function will toggle this inhotel.
and everything within the other components will have a div class hotel-out and hotel-in . and that will be visible/invisible depending of the inhotel class / style .
But for some reason it wont work.
What do i need to do to make this work?
edit 2:
I could use ngclass as mentioned, and get the hotelstate by every controller/route.
But in PHP and angular1, i had the option to put that piece of style code in the main file, ( where the router-outlet is located), and it would work as supposed.
The ideal would be that i only one place changes the display of hotel-in and hotel-out to toggle display none and display block.
then everything that had hotel-in and hotel-out in the other routes/views would act according to id.
edit3:
an example of html style that would be in different routes.
<div class=hotel-in">You are in hotel , more html...</div>
<div class="hotel-out">Something completely diff here </div>
edit3:
even when im style *ngIf, it wont produce any acual tags with content on the page.
edit4:
It seems like i cant even post a style tag in the angular/angular-cli html. how come? and how can i make so i can make the style tag?
for some reason, even this wont come up to the page.
<style>
.test {
color:black;
}
</style>
You see change the style rules if they are written inside html page itself using https://github.com/deanmcpherson/angular-inline-style.
The idea is to rebuild style rules each time scope changes, by default this functionality is not provided by angular. But we can write a directive that links to style tag and recompiles it based on scope.
I am using a third-party survey software (Qualtrics). I have a survey question, and the answer is a drop-down menu. You can see this at the bottom of the page at alsquest.org and in the image below.
I want to center the drop down menu under the question text. (Failing that, another option would be to indent the drop-down menu so that it aligns with the rest of the text; I believe the current indent is 120px.)
I have access to the HTML for the question text, but the only way I can modify the answer drop-down menu is to use JavaScript. Qualtrics allows you to add JavaScript, but I am not a coder so I have no idea what code to use. This is the code shell that they provide for the JavaScript:
Qualtrics.SurveyEngine.addOnload(function()
{
/*Place Your JavaScript Here*/
});
My question is, what JavaScript code do I put there to center (or indent) the drop-down menu? Any suggestions or questions would be appreciated.
To do this in JavaScript, you need to 'get' the HTML element from the page, and then set the CSS style. You could do it like this:
var dropDown = document.getElementById("the-dropdown");
dropDown.className = "dropdown-css-class";
Then in a CSS file included on the HTML page you would have to define the class:
.dropdown-css-class {
margin-left: 120px;
}
or like this:
var dropDown = document.getElementById("the-dropdown");
dropDown.style["margin-left"] = "120px";
Without seeing the HTML I can only guess at how you would center or otherwise align the drop down, but this should get you going. You can experiment with jsfiddle.
I guess you can change css by jquery like this:
First you need to find id or class of that dropdown menu. After that you can add jquery code to the code like this:
$("HERE GO ID OR CLASS FROM THAT ELEMENT").css("align","center");
or what ever you want for css.
But if you have more dropdown menus. You should get class and say
$("CLASS NAME").on('click', function(){
and here get id from clicked one and then use above code for changing css
});
This is best done with CSS. In your case, you can add the following code in the "Custom CSS" section of the Advanced Look and Feel Settings:
#QID2 > div.Inner.BorderColor.DL > div > fieldset > div {
text-align: center !important;
}
Note that this will only work for that specific dropdown in that specific survey (Nothing else will be affected). If you change your survey theme it may no longer work for you so watch out for that.
As an FYI I worked in Qualtrics Support for a year.
I am trying to apply a class on click to li of my div.
This is the js I have.
$(document).ready(function() {
$('#toggleme').click(function() {
$(this1).addClass('active_class');
});
});
Now when I click at the cart, I want to change that cart image.
I am trying to do that via the css by applying the class background-image:url(""); property. But for some reason I am not able to get it working.
Here's the fiddle
Please help.
Change your JS code to this:
$(document).ready(function () {
var img=0;
$('#toggleme').click(function () {
$(this).toggleClass('active_class');
if(img==0){
$(this).find("img").attr("src", 'http://cdn.mysitemyway.com/etc-mysitemyway/icons/legacy-previews/icons-256/simple-red-glossy-icons-business/086707-simple-red-glossy-icon-business-cart5.png');
img=1;
}else{
$(this).find("img").attr("src", 'http://www.daru-koi.com/images/winkelwagen.png');
img=0;
}
});
});
Here is the JSFiddle
Also note that the icon in your code is due to the img tag source and not the CSS. Therefore overwriting using CSS will not help.
The above code switches the source everytime you click.
See the cascade.
count 1 if the declaration is from is a 'style' attribute rather than a rule with a selector
You have two background image rules applying to the element:
.active_class {
background-image : url("http://cdn.mysitemyway.com/etc-mysitemyway/icons/legacy-previews/icons-256/simple-red-glossy-icons-business/086707-simple-red-glossy-icon-business-cart5.png");
}
and
style="background-image:none"
The style attribute one is more specific and "wins".
Avoid style attributes. Define the default styling in the stylesheet. (Or just remove it entirely since none is the default in the browser stylesheet).
Your jQuery is working correctly in that it is toggling the active_class when clicked. You can use developer tools (in Chrome or IE, press F12) to verify.
The problem is your jQuery targets the <li> element, but you have an <img /> element within it that is not affected by jQuery in any way.
You need to have the default cart image displayed as a background in CSS and use the jQuery to toggle between it and a different image.
i need a little bit of help with this page: http://www.levelidiomes.com/new/ (on the part called Formaciò) i have this js
http://www.levelidiomes.com/new/wp-content/themes/Kronos-WP2/js/formacio.js
That is adding a class to the menu on the left (called nav.stickymeny) also is doing other stuff for this specific part.
So, i need to:
add the active class when scrolling over the section
add the active class to the clicked link
I don't know why is not working correctly please helps
It looks like the .js is fine. It's adding the 'active' class when it's supposed to.
adding this little bit of CSS worked for me:
.stickymeny .active {
color: #whatever;
}
I am dynamically generating a layout thumbnail code for shindig, which will create a preview/thumbnail of the layout and place it inside a drop down menu.
The issue is, that if a div is put inside <ul/> or <li/> element , or for that matter any part of their hierarchy, it is converted to a yui-overlay or yui-menu itself.
Because of this, the layout previews are not appearing , and if by some way I do show them ,then click event for them is not being triggered.
Has anyone faced a similar issue before this? Or does someone has some insight into how can this be done??
Thanks,
Neeraj
Try to use a span with the style display: block instead. With this style, it behaves like a div but the overlay will probably leave it alone.