How change div based on the child class? - javascript

I'm working with google maps and I want to change the "info window" dimensions.
The gmaps js automatically generate this section:
I want to target the selected section that has no id or class to identify changing it's width. Then I thought that I need to use it's child div class named "gm-style-iw" like a reference to reach the other div above.
The idea would be something like this:
div < .gm-style-iw {
width: 220px;
}
but we know that this '<' is not possible using css.
How can I do that?

As you are probably already aware, you'll need javascript for this to work as intended, and using jQuery's .parent()ref. method would probably be the most straight forward route to getting there.
Ref: .parent() | jQuery API Documentation
Consider the below:
jQuery('.gm-style-iw').parent().css('width','220px');
On inspecting the element, you will notice that the inline width property has been applied and is over-qualifying the external width property rule set be the selector .parent.
Code Snippet Demonstration:
jQuery('.gm-style-iw').parent().css('width','220px');
.parent {
width: 100%;
background: #dadada;
padding: 5px;
border: 1px dashed;
box-sizing: border-box;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
<div class="gm-style-iw"><code>gm-style-iw</code></div>
</div>
It may be better practice to consider applying a class to these elements instead. As demonstrated above, inline style rules are quite persistent and are tricky to over-qualify without depending too much on the !important declaration.
Consider the following:
jQuery('.gm-style-iw').parent().addClass('contians-child');
Using a class selector as your identifier, you can circumvent this issue which may be sparing you some grey hairs down the line or wasted hours further on into your build.
Code Snippet Demonstration:
jQuery('.gm-style-iw').parent().addClass('contians-child');
.parent {
width: 100%;
background: #dadada;
padding: 5px;
border: 1px dashed;
box-sizing: border-box;
}
.parent.contians-child {
width: 220px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
<div class="gm-style-iw"><code>gm-style-iw</code></div>
</div>

Related

Call CSS Class instead of inserting Attribute using JQuery (.css())

I am building a fixed header with using JQuery
Everything is working fine at the moment but instead of setting attributes to classes and I want to call them from css directly. I am not quite familiar with this method.
One of the example is below;
#header-main {
background-color: #ffffff;
min-height: 107px;
color: #8c8c8c;
}
#header-main .sabit{
position : fixed;
width: 100%;
z-index: 98;
padding-top: 35px;
border-bottom: 3px ridge #7BBD42;
}
How I am doing is; (Working)
var menu = $('#header-main');
if (...)
menu.css('position','fixed').css('width','100%').css('z-index','98').css('padding-top','35px').css('border-bottom','3px ridge #7BBD42');
else
menu.removeAttr('style'); //Back to normal
What I am doing to achieve what I want; (Not working)
var menu = $('#header-main');
if(...)
menu.addClass("sabit");
else
menu.removeClass("sabit"); //Back to normal
I also tried menu.addClass(".sabit"); or menu.addClass("#header-main .sabit"); but none of them worked.
What part am I doing wrong to add directly css class using JQuery?
It's not working because you have a space between #header-main and .sabit in your CSS, meaning that your CSS is trying to style the .sabit descendant of #header-main and not the #header-main element itself.
Change:
#header-main .sabit
To:
#header-main.sabit
Your logic is fine, the problem comes from your CSS.
The line #header-main .sabit{ should instead be #header-main.sabit{, as the sabit class is set on the #header-main element and not on one of its children elements.
Try changing
menu.addClass("sabit");
to
$(menu).addClass("sabit");
addClass comes from the Jquery library so you need to reference it from there.

How can I insert a whole css class before an HTML element that I find?

I need to insert an image before an element I am trying to find in this code (also I am trying to add the class in the same function).
The js:
insertSearchIcon: function(){
$(document).find('jstree-icon').prepend('<div class="oob-dropdown">test</div>');
}
And the css class I am trying to insert.
.oob-dropdown {
background-image: url("/apps/cdpe/img/search_444444.png");
background-color: transparent;
background-repeat: no-repeat;
height: 25px;
width: 25px;
border: none;
padding-top: 1cm;
position: relative;
}
Hopefully what I am trying to do is possible, but thanks for any help!
you probably missed the . in your selector find('jstree-icon') and secondly prepend() adds another item before the first child element of the matched selector.
To add another element right before another you might be interested in before:
$('.jstree-icon').before('<div class="oob-dropdown">test</div>');
Btw: $(document).find() is probably not best practice, rather use the selector directly!
.prepend() inserts an element as the first child of another; it sounds like you need .before(). Your selector also needs a dot (assuming jstree-icon is a class).
$('.jstree-icon').before('<div class="oob-dropdown">test</div>');

Possible to remove padding on higher order element from lower order element?

Bit of a weird question and this is very hacky, but I am stumped. I am using an internal tool to create a webpage. As such, I only have access to some of the generated HTML and CSS due to the nature of these tools.
So, forced upon me is the HTML
<div class="example">
<div class="whatICanAccess">
</div>
</div>
And my CSS :
.example {
padding : 1.6em;
}
The only place I can edit my CSS is within the "WhatICanAccess" HTML tag, using style="foo".
Is it possible for me to remove the padding from the outer element ("example") here in any way?
Is it possible for me to remove the padding from the outer element and ONLY have it effect the direct parent of "WhatICanAccess"?
Example is a class that is used throughout the code, and I would only like to remove it in one particular place - but as I say, I cannot add more specific identifiers/tags - I can only edit in this one place.
Can anyone help? Thank you :)
UPDATE :
I now have this HTML :
<div class="example">
<div class="moreSpecific" style=" padding: -1.8em;>
</div>
</div>
but the 1.6em of .example is still overriding. What have I done wrong here ?
Give the 1 place a separate class and give it negative margins to balance the padding.
Alternatively, use position: absolute & use width and height values.
With either you don't have to worry about not having access to the parent element.
Tried to make a JSFiddle, but apparently they've removed the "save" option for the time being ...
<div class="example">
<div class="whatICanAccess">
<div class="noPadding">This div has negative margins and absolute positioning</div>
<div>This div inherits its padding from 'example'</div>
</div>
</div>
.example {
padding : 1.6em;
height: 400px;
width 100%;
background-color: #ccc;
}
.whatICanAccess {
height: 300px;
background-color: #fff;
}
.noPadding {
position: absolute;
margin: -1.6em 0 0 0;
background-color: #eee;
}
If you must use inline CSS...
<div style="margin: -1.6em 0 0 0; position: absolute;">This div has negative margins and absolute positioning</div>
If you know the id of example, you could just use document.getElementById('example').style.padding='0px';
Giving your html a negative margin or padding might work too.

Change the style of :before and :after pseudo-elements? [duplicate]

This question already has answers here:
Selecting and manipulating CSS pseudo-elements such as ::before and ::after using javascript (or jQuery)
(26 answers)
Closed 3 years ago.
This is what my code looks like:
$('.mainSpan:before').css('background','url(_gfx/cmn/main_bg.png)');
This does not seem to work so I'm asking if it's even possible to add
background images to shadow elements with jQuery.
It's not possible to directly access pseudo-elements with Javascript as they're not part of the DOM. You can read their style using the optional second argument - which most, although not all, browsers in current use support - in .getComputedStyle() but you can't directly change their style.
However, you could change their style indirectly by adding in a new style element containing new rules. For example:
http://jsfiddle.net/sjFML/
The initial CSS assigns the :before pseudo-element with a green background, which is turned to black by inserting a new style element.
HTML:
<div id="theDiv"></div>
CSS:
#theDiv {
height: 100px;
background: red;
}
#theDiv:before {
content:' ';
display: block;
width: 50px;
height: 50px;
background: green;
}
Javascript:
var styleElem = document.head.appendChild(document.createElement("style"));
styleElem.innerHTML = "#theDiv:before {background: black;}";
There is also solution with CSS Variables (aka custom properties):
var style = document.querySelector('.foo').style;
style.setProperty('--background', 'url(http://placekitten.com/200/300)');
.foo::before {
background: var(--background);
content: '';
display: block;
width: 200px;
height: 300px;
}
<div class="foo"></div>
For browser support see Can I use and here is link to Ponyfill (same as Polyfill, but you need to call a function)
Ponyfill work with CSS in link and style CSS, but if you use code below, you can set the variable like with setProperty (it will run only in browsers that don't support CSS Variables like IE11)
var style = document.querySelector('.foo').style;
style.setProperty('--background', 'url(http://placekitten.com/200/300)');
cssVars({
variables: {'--background': 'url(http://placekitten.com/200/300)'}
});
.foo::before {
background: var(--background);
content: '';
display: block;
width: 200px;
height: 300px;
}
<div class="foo"></div>
<script src="https://unpkg.com/css-vars-ponyfill#2/dist/css-vars-ponyfill.min.js"></script>
Unfortunately the cssVar ponyfill is global like setting var on :root. If you need to support IE11 or other old browser you can try to search for better polyfill or library.
It is possible to change the value of the ::after element but not directly. Gotta be sneaky. Works on all browsers.
Let's say you have an element:
<div class="thing1">hi here</class>
And you got an ::after css style for it:
.thing1::after {
content:"I am what comes ::after a thing :)";
display: inline-block;
background-color: #4455ff;
padding:3px;
border: 1px solid #000000; }
And you want to change the content and the background color of the ::after pseudo-element using javascript. To do this, make a second CSS rule with the changes you want applied and have both the current class name and add a totally new class name to it. So let's say I want to change the content and the background color a bit and leave the rest of the stuff, the same:
.thing1.extra_stuff::after {
content:"Some parts of me, changed!";
background-color: #8888cc; }
Now, you can just fire off an onclick javascript event that will apply those two new rules to the element, by adding the second class name, to the element :) yay
function change_the_after_attribute(thing_button) {
thing_button.className="thing1 extra_stuff"; }
https://jsfiddle.net/bt8n26a5/
fun side notes:
You can use thing_button.classList.add("extra_stuff"); and thing_button.classList.remove("extra_stuff"); to make the function applicable to many different elements with many different class names, and to be able to remove your changes, as well!
Use a variable instead of the "extra_stuff" string to change what you're adding more dynamically.

JQuery autocomplete result style

I'm trying to change the style from my AutoComplete result.
I tried:
// Only change the inputs
$('.ui-autocomplete-input').css('fontSize', '10px');
$('.ui-autocomplete-input').css('width','300px');
I searches and could not find out what the class used by the result is, so that I can change its font size and maybe its width.
Thanks.
Using:
jQuery-UI AutoComplete
EDIT: I need change the css from my result, that comes from my JSON, not from the input. The code you posted, only changes the input, not the result. This is why I asked for the class used by the result list (at least, I believe that is a list). I tried to use fb from ff and could not find it. Thanks again for your patience.
EDIT2: I'll use the autocomplete from jQuery UI as example.
Check this to see the jQuery-UI auto-complete page
After I type "Ja" in the textbox from the front-page sample, Java and JavaScript will appear as Results, in the little box below the textbox.
This little box is what I want to change the CSS of. My code in the sample above only changes my textbox CSS (which I don't need at all).
I don't know if I'm being clear now. I hope so, but if not, please let me know; I'll try harder if needed to show my problem.
The class for the UL that will contain the result items is what I need.
SOLUTION
As Zikes said in his comment on the accepted answer, here is the solution. You just need to put ul.ui-autocomplete.ui-menu{width:300px} in your CSS file.
This will make all the the results box css have width:300px (like the sample).
I forgot that the results object does not exist on page load, and therefor would not be found and targetted by a call to $('...').css(). You'll actually need to put ul.ui-autocomplete.ui-menu{width:300px} in your CSS file, so that it will take effect when the results are generated and inserted into the page.
– Zikes
Information on styling the Autocomplete widget can be found here: http://docs.jquery.com/UI/Autocomplete#theming
Fiddle
HTML
<input type="text" id="auto">
jQuery
$('#auto').autocomplete({'source':
['abc','abd','abe','abf','jkl','mno','pqr','stu','vwx','yz']
});
CSS
ul.ui-autocomplete.ui-menu{width:400px}
/*
targets the first result's <a> element,
remove the a at the end to target the li itself
*/
ul.ui-autocomplete.ui-menu li:first-child a{
color:blue;
}
I was able to adjust by adding this css to the <head> of the document (above the autocomplete javascript).
Some of the following may be more relevant than others. You could make it specific to the autocomplete input if changing these affects other elements you don't want affected.
<style type="text/css">
/* http://docs.jquery.com/UI/Autocomplete#theming*/
.ui-autocomplete { position: absolute; cursor: default; background:#CCC }
/* workarounds */
html .ui-autocomplete { width:1px; } /* without this, the menu expands to 100% in IE6 */
.ui-menu {
list-style:none;
padding: 2px;
margin: 0;
display:block;
float: left;
}
.ui-menu .ui-menu {
margin-top: -3px;
}
.ui-menu .ui-menu-item {
margin:0;
padding: 0;
zoom: 1;
float: left;
clear: left;
width: 100%;
}
.ui-menu .ui-menu-item a {
text-decoration:none;
display:block;
padding:.2em .4em;
line-height:1.5;
zoom:1;
}
.ui-menu .ui-menu-item a.ui-state-hover,
.ui-menu .ui-menu-item a.ui-state-active {
font-weight: normal;
margin: -1px;
}
</style>
If you are using the official jQuery ui autocomplete (i'm on 1.8.16) and would like to define the width manually, you can do so.
If you're using the minified version (if not then find manually by matching _resizeMenu), find...
_resizeMenu:function(){var a=this.menu.element;a.outerWidth(Math.max(a.width("").outerWidth(),this.element.outerWidth()))}
...and replace it with (add this.options.width|| before Math.max) ...
_resizeMenu:function(){var a=this.menu.element;a.outerWidth(this.options.width||Math.max(a.width("").outerWidth(),this.element.outerWidth()))}
... you can now include a width value into the .autocomplete({width:200}) function and jQuery will honour it. If not, it will default to calculating it.
Just so you know you have two options for optimizing your code:
Instead of this:
$('.ui-autocomplete-input').css('fontSize', '10px');
$('.ui-autocomplete-input').css('width','300px');
You can do this:
$('.ui-autocomplete-input').css('fontSize', '10px').css('width','300px');
Or even better you should do this:
$('.ui-autocomplete-input').css({fontSize: '10px', width: '300px'});

Categories

Resources