how to style class element? - javascript

I have a js library on my website which is creating popups for me.
Im trying to style the popups but nothing is working.
the html output is
<div class="lpopup zoom" style="opacity: 1; transform: translate(435px, 200px); bottom: -6px; left: -54px;">
All that I have been trying to is change the bottom and left position.
When I inspect with fire bug the css is
element.style {
bottom: -6px;
left: -54px;
opacity: 1;
transform: translate(435px, 200px);
}
I have tried manipulating the css by doing
.lpopup, .lpopup zoom, .lpopup.style, lpopup element.style {
bottom: 30px;
}
But none of them are working, I've tried as many variations as I can think of.
I have also tried with js
$(".lpopup zoom").css("bottom", "30px");
and other variations
nothing happening though
Im really struggling just trying to change the element style of a popup.
Thanks for any help

The content in the style attribute is more specific then any rule-set, so it will always come last in the cascade and be applied.
The clean solution is: Move the initial CSS out of the style attribute and into the stylesheet. Then write your rules while paying attention to specificity.
The hacky solution is: Use the !important flag
The really nasty solution is: Use JavaScript to change the style attribute (which is what you are trying, but you have the selector wrong).
.lpopup zoom will match: <anything class="lpopup"><zoom> This element </zoom></anything>
You want .lpopup.zoom which will match an element that is members of both classes.

You need .lolup.zoom { css here }.
Sorry, I didn't fully comprehend the question like Mr. Alien did. Yes, inline styles will always override external styles, so you either need to use !important (which I'd avoid), or remove the inline style if possible.

writing style in your own page wont works....
You just open your popup js library and change the style which are added throught the script...
It is very easy way to customize your popup design in js file....

.lpopup{//css here}
.zoom{//css here} should exist in your css file.

Related

transform: translateX makes hyperlink unclickable

I made a carousel slider(copied the code from some codepen then made some changes) and it looks something like this. Anyway the problem is that those images have hyperlinks that work unless i make a transform on x axis..for lets say 240px the hyperlinks stops working. What i mean by that its that its unclickable.
This is the structure of the html code.
I made a script that adds style = "transform:translateX(-240px); to the carousel div.
Expected behaviour: the hyperlink should pe clickable.
You can find the code at: https://github.com/AlexxW/AlexxW.github.io
and the webpage at https://watchwhatmovie.tk/ (for some reason its not updated yet)
Try posting code instead of images for better answers.
this question similar to - CSS - Transform function not working on links?
you need to make the link (i.e <a> tag) CSS to display: block; because transform doesn't work on display: inline; (which is default for a tag).
Because no css was provided, maybe the z-index is not correct (the layers). Try this:
.card {
position: /* set this to relative/absolute, depending on your preference */;
z-index: 1;
}

Change html Text with conditional css but without js

Sorry about this absolutely newbie question, but I've been searching for an already similar post, and couldn't find it.
My question is:
I have a paragraph text in my HTML code which I want to automatically change into a new text once I click a specific Button.
Can this be done with CSS only, without any javascript?
Since some users block javascript, that's why I was looking for a way around...
Thanks a lot.
actually #Vaidya & #Preet it is possible via css only :
https://css-tricks.com/swapping-out-text-five-different-ways/
#fana you'll need to use a plus selector or tilde selector to make the changes affect the following div not itself but other than that you're good to go.
I can see that using css to replace content is strongly discouraged within the stackoverflow community. However I haven't found another cause other then that of code cleanliness.
I really think in coming years the true potential of CSS/SASS will unravel and people will cease to see the programmatic/dynamic as strictly excluded from CSS/SASS.
It can't be done through CSS You must need to add a script for an on-click event.
I know it is not what you exactly want but it can give you idea about it and with some changes you can make it.(but conditional and on click event using css is definitely not possible, you need javascript for that)
If you can make it work on Text click itself then it is easily possible. You only need a checkbox which is hidden and label in which you will show text. On click of text you can swap into anther text with only css:
#example {
position: relative;
}
#example-checkbox {
display: none;
}
#example-checkbox:checked + #example:after {
content: "Hide";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: white;
}
<input id="example-checkbox" type="checkbox">
<label for="example-checkbox" id="example">Show</label>
Reference See css only part.
Hope it will help you.

Iframe style being overrridden by website's css

I work for an adtech. We show ads using iframe but for one particular website where we are showing ads my iframe height is being overriden.
The style that overrides my css style is as follows:-
#story-sec .led-content .cont-bot .right-side .news-detail-landing iframe:not(.instagram-media) {
width: 100% !important;
height: 200px!important;
margin: 5px 0px;
}
I create iframe dynamically using javascript. The site is overriding my css.
var iframe = createHtmlElement("iframe");
setAttributesForElement(iframe, { 'vspace':'0', 'hspace':'0', 'scrolling':'no', 'id':'myIframeId', 'frameborder':'0', 'marginwidth': '0', 'marginheight': '0', 'allowtransparency':'true', } );
setStyle(iframe, {'margin':'0px', 'width':'100%', 'height':'100%', 'padding':'0px'} );
So in above code setAttributes and setStyle are function that I have which take input and set style adn attributes for html elements.
Is there a way to avoid my css being overridden ? I tried searching for answers but got not much clarity.
I can set class named instagram-media for my iframe which solves the issue but the ads are placed on different sites so I might encounter same problem again. so looking for a permanent solution.
I had experience of work like that, so in those cases I would usually do this:
- Target the iframe you created with > css pointer.
- Is there any possibility to set !important flags on your styles?
- Try to create a very long distinctive class name for your iframe.
You mentioned adding a class resolves the issue but that you're worried about, another website using that same class and again over writing your css.
Your best bet may be to simply use some really obscure class?
Like...
class="YourCompany_iframeCSS_InsertADateHere_AnAlphaNumericStringHere"

CSS for dynamic inserted elements

Currently I'm working on a website where I'd like to show some toolstips for specific DIV elements. My weapon of choice is jQuery Tools.
So when I use $(".toolTipMe").tooltip(); it works quite nice. As soon as I hover the element a new DIV appears in the DOM:
<div class="tooltip" style="display: none; position: absolute; top: 313.65px; left: 798.5px;">foo</div>
However the design is done by our very own css-monster (you should this this guy!) and he's using a a lot of z-indexes so the .tooltip-DIV is behind the other elements.
Now the question:
The following code in our .css File is not having any effect:
.tooltip{
z-index: 9001;
}
In fact the attribute is not even showing up when debugging the website. But the following will work:
$(".toolTipMe").tooltip({
onShow: function(){
$(this).css("z-index","9001");
}
});
I'm not sure how CSS Rules are applied for dynamic inserted DOM Elements but what I really detest in the current workaround is the mixture of functionality and style. Any chance to clean up this mess? :C
I am not familiar with jquery tools, but if your z-index is not working you must need a !important tag or making it position:relative or position:absolute
In jquery tools tooltip you need to specify the z-index inside the tooltip constructor like:
$(".toolTipMe").tooltip({ z-index: '9001'});
I'm not sure if it is z-index or zindex.. check it out

Ajax auto-complete, with bespoke popup location

I'm doing something that involves ajax auto-completion of phrases in a <textarea>. I've got this working well using the jquery autocomplete plugin; however, it is hard-coded into this to position the popup below the <textarea>.
For what I'm working on, the <textarea> is at the bottom of the page; I ideally want the options to appear above the <textarea>.
Is there a similar existing (and half-decent) autocomplete script that would allow this? My other options are:
try to reposition it after-the-fact using more jquery
hack the plugin code to pieces to reposition it
write something from scratch (sounds simple, but there are a few nuances in a decent autocomplete)
Suggestions?
For info, here's what I ended up with:
#known-parent .ac_results
{
position: fixed !important;
top: auto !important;
bottom: 80px !important;
}
It's not the cleanest solution in the world, but you can overwrite the style properties that the autocomplete plugin writes by using "!important" in your css.
Styles belong in CSS as much as possible anyways.
If I remember correctly, the plugin sets the "top" value in the "style" attribute of the autosuggest div.
In your css you should be able to just do:
#whatever_the_id_of_the_box_is {
position: absolute !important;
top: {{ whatever value you want here }} !important;
}
Can you change the CSS of the popup and assign negative values to margin-top? That should move the content to the top, but your results will look a little weird as the relevant values will be on the top.
Wouldn't it also be possible to edit the autocomplete plugin to edit the style of the container and move the location of the box? I don't think it would be too difficult, but I haven't seen that plugin in a while.
<div style="display: none; position: absolute; width: 151px; top: 21px; left: 91.65px;" class="ac_results"></div>
You'd need to adjust this in the plugin code.
Edit: I actually wouldn't recommend this. There should be a way to reverse the result order in the UI plugin. Do that, and change the style values, and you should have a clean looking result set. I'll add the exact code when I get a chance

Categories