I tried to set multiple css to the jquery component using id. But it is not working. If anyone knows, please help me to find the solution:
My jquery component is like
<select-dropdown mode="disabled" id="maindropdown" type="dropdown" value="Option 1,Option 2"></select-dropdown>
CSS:
select-dropdown[mode^="disabled"], select-dropdown [disabled], select-dropdown[mode^="disabled"]{
pointer-event:none;
color:#ccc;
padding:2px;
}
Trying to change this css using jquery like:
$("#maindropdown select-dropdown[mode^="disabled"],select-dropdown [disabled], select-dropdown[mode^="disabled"]").css({
pointer-events:auto,
color:#000,
padding:0px;
});
You have a syntax error in your selector:
Try this:
$("#maindropdown").css({
pointer-events: auto,
color: #000,
padding: 0px;
});
Related
I would like to know:
is this header of professional quality?
if not, what could I add or change?
I've tried not absolutely positioning the elements in the header and floating the button to the right, but it always results in the button being too low. Should I just keep the elements absolutely positioned, or is there another method I don't know about?
I am also having trouble setting proper ids and classes for my elements, do you know of a way to make this code more DRY?
I am aware that this is far from professional quality and that I'm an idiot, but I'm having trouble writing clean code and I don't know which way is best to make a header like this. I've tried googling help, and looking at code from other websites, but I'm always perplexed by their examples.
I would greatly appreciate it if you could give me some pointers, thanks!
HTML:
<header id="master-head">
<div id="master-head-content">
<span id="master-head-title">Brodie Been</span>
<span id="master-head-primary">
My Work
About Me
</span>
<span id="master-head-secondary" class="menu-right">
<button id="master-head-contact">CONTACT ME</button>
</span>
</div>
</header>
SCSS:
$shadowColor:rgba(0,0,0,0.16);
$softBlack:#404040;
$primaryColor:#348DC8;
#mixin vertCenter{
position:absolute;
top:50%;
transform:translate(0, -50%);
}
body{
background:#404040;
font-family:Open Sans;
button{
display:inline-block;
position:relative;
border:none;
color:white;
text-decoration:none;
font-size:14px;
background:$primaryColor;
&:hover{
cursor:pointer;
color:white;
background:$softBlack;
}
}
}
#master-head{
position:relative;
height:100px;
font-size:14px;
background:white;
#master-head-content{
width:100%;
height:100%;
#master-head-title{
#include vertCenter;
padding-left:50px;
font-size:24px;
}
#master-head-primary{
#include vertCenter;
padding-left:300px;
a{
text-decoration:none;
color:inherit;
margin-right:30px;
&:hover{
margin-bottom:-1px;
border-bottom:1px solid black;
}
}
}
#master-head-secondary{
#include vertCenter;
right:50px;
#master-head-contact{
width:130px;
height:50px;
}
}
}
}
Stack overflow probably isn't the place for this for future reference but don't sweat it! Here's my take:
Never use ids with css. (Here is an explanation why)
You should avoid nesting element selectors in css. Instead I recommend following BEM.
When naming my variables I like to format them based on type. So call your colors $color-black instead of just $black etc.
I would not use named css colors. Either use variables or write them out. Even with "safe" colors like black and white it just looks sloppy.
This goes back to #2 but avoid using element types as selectors. Give your button etc classes and use them instead. Unless of course that button style is going to be universal within your site.
Hopefully this feedback helps you! Good luck with your header.
Is it possible to use the usual Input box + Select box and style them to make something like selectize's textbox and box?
just like the email's box? I tried to understand their jQuery code but totally didn't understand any thing, So i was wondering if there is an easy and quick way to program this specific part by myself, i searched at Google to see any tutorial about that but couldn't find any.
the idea itself is simple. it's an input element of type text, when the focused it has shows a list of elements (li/div/span whatever you want) and position it exactly under the input and style it so it looks like it's connected to the input (the input bottom border is short)
I did a very small example for you, try to ignore the bad styling.. just understand the idea.
.formContainer{
background-color:lightblue;
height:600px;
width: 600px;
}
#nameSelector{
width:400px;
border: 4px solid green;
}
#nameSelector:focus{
border-bottom:1px solid green;
}
#nameList{
list-style:none;
display:none;
margin:0;
margin-left:4px;
padding:0;
width:400px;
}
#nameList li{
background-color:lightgrey;
}
#nameList li:nth-child(even){
background-color:white;
}
#nameSelector:focus+#nameList{
display:block;
}
<div class="formContainer">
<input id="nameSelector" type="text"/>
<ul id="nameList">
<li>John</li>
<li>Jane</li>
<li>Celine</li>
</ul>
</div>
Maybe you can use this to make your textbox filter a select box and, using css, make the correct adjustment.
You could even create your jquery plugin to apply like
$('myInputText').createOptionList({...});
I am trying to remove the css of an image. My actual code doesn't include this CSS, but it comes from a generate code. I can't touch that neither modify anything that is related to the generared code.
This is my real code
<div class="bubble">
<img id="one" src="/static/webupload/MyronArtifacts/images/descarga.png" style='float: left;' alt="Quotes">
<p id="comment11">I was very impressed with the unique design and high quality of this pen.
</p>
</div>
<div class="quote_speech">
<div class="name" id="author11">By PEDE</div>
<div class="company" id="company11">September 25,2013</div>
</div>
This code is added to a div from the generated code name rightCol
And there is a CSS class declare the following way
#rightCol img{
display:block;
float:none;
margin:0 auto 0 auto;
position:relative;
border:0;
padding:3.5px 0;
backgroun-color:#fff;
width:166px
}
The issue is on width:166px.
The bad new for me is I can't remove it manually(Generated code).
So I was thinking to use javascript for this.
using this $('#one').hasClass('img')
But this returns me false.
I did a demo getting in JS FIELD getting the CSS. DEMO
If I remove the 166px from the CSS it works, but that solution is not available for me. And the has class returns me false. Wondering why?
Thanks in advance
Actually you can use !important to override this behavior but it is better to declare more specific rule rather than using !important
#rightCol img#one {
width: auto;
}
Demo
Hi I checked your demo page and just added one line to your document.ready function.
$(document).ready(function () {
$('#one').css('width', 'auto');
randomtip();
});
check and let me know if still problem exist.
I'm using custom scrollbar, add one scrollbar is very easy, but if I want to add second they twice use one mCustomScrollbar.css I don't know how to change that second div. I was looking on code on demo custom scrollbar but this just fail.
JQUERY
(function($){
$(window).load(function(){
$(".suwak").mCustomScrollbar();
});
})(jQuery);
HTML
<link href="scrollbar/jquery.mCustomScrollbar.css" rel="stylesheet" type="text/css" />
<script src="scrollbar/jquery.mCustomScrollbar.concat.min.js"></script>
<div class="suwak"> content with first scrollbar </div>
<div class="suwak2"> content with second scrollbar </div>
Some simply CSS
.suwak{
position:relative;
width:475px;
height:300px;
background-color: #000e1b;
color: white;
overflow:hidden
margin-top:160px;
margin-left: 15px;
}
Just add another class on div with class="suwak", this will run your scrollbar and your second class will help override your first class. In css you are saying, if something has both classes, use new style. In css your selector would be .suwak.suwak2, no space between classes in css.
<div class="suwak"> content with first scrollbar </div>
<div class="suwak suwak2"> content with second scrollbar </div>
.suwak{
position:relative;
width:475px;
height:300px;
background-color: #000e1b;
color: white;
overflow:hidden
margin-top:160px;
margin-left: 15px;
}
.suwak.suwak2 {
/*new stile*/
}
Why don't you use second class as well? is it something that you don't know how many DIVs will be there to have same scrollbar?
If it is limited to 2 only, then try
(function($){
$(window).load(function(){
$(".suwak").mCustomScrollbar();
$(".suwak2").mCustomScrollbar();
});
})(jQuery);
Or you can mention same class for second DIV as well. I have suggested this as per my observation of the code you posted.
Is it possible to change the background color of a div using css?
Code so far:
CSS
.div{
background-color: #000;
}
.live .div:not{
background-color: #ddd;
}
Javascript
function change(){
$("body").addClass("live");
}
HTML
<div onclick="change()">change</div>
<div>...</div>
Everyone seems to be confused about what you're trying to accomplish. #fedxc probably has the right solution. But if you're trying to change the color only of the div that was clicked, this will do it:
HTML:
<body>
<div>
Change this div!
</div>
</body>
CSS:
div{
background-color: #000;
color: white;
}
div.live{
background-color: #ccc;
}
Javascript:
$("div").click(function(){
$(this).addClass('live');
});
Live example here: http://jsfiddle.net/7rbdg/1/
Use the following:
.div{
background-color: #000;
}
.live .div:not{
background-color: #ddd;
}
Also, are you going to use <div class="div">...</div> somewhere in your code?
Looks good what you're doing, just make sure to use background-color. I made a thing that does that with a random color, if it helps. http://gascalculator.ca/randomcolor
I used pure javascript though, I'm not familiar with jquery
If I understood correctly what you want to do is change the body background color when you click the DIV.
Since you are using jQuery I would trigger the background color change with a .click() function on the DIV.
HTML
<body>
<div class="div">
Change my world!
</div>
</body>
CSS
.div{
background-color: #000;
color: white;
}
JavaScript
$(".div").click(function(){
$("body").css("background-color", "#ddd");
});
Here is a live example.