Responsive image in CMS - javascript

I have problem with CMS. I need to change css that the page could be responsive.
One of the div has data-height, data-weight and height, width in style in html that it looks like that
div class="classOf" id="idOf" data-width="755" data-height="125" style="width: 755px; height: 125px;"
I can't use my new css due to is not working if I select this id and change properties.
This is CMS so I can only console to append new css and js.
My question is how to neutralize this set properties on html and apply css with max-width:100%
that will work ?

Try to include your own customized css at the end of the html document, it will override any existing css file included before.

In your css add !important to the width attribute, it should over-ride the inline style.
Example:
.classOf{
width: 100% !important;
}

Related

overriding percentage font-size attribute from html tag

I have a simple webpage where opening html tag has an attribute font-size:60% !important set in css file.
<html>
<head>
... some js and css ...
</head>
<body>
... header ...
... content ... <-- need to replace that by new content
... footer ...
</body>
</html>
Everything is rendered well (header/content/footer).
I also have another file where I've got content to be placed on this webpage (based on bootstrap 4) and I am not allowed to modify existing js/css files (they are loaded via API, so created dynamically).
Problem is that this content looks well when I render it it in separated file as it is. Once I replace old content with new (leave header and footer) and add css files it looks well but of course everything is smaller due to this font-size set in html tag.
Is there any way to make it working?
I've tried to unset current font size by font-size:unset also in html tag (by adding and targeting class) and then my content is rendered properly but unfortunately header and footer have to big font then.
Looks like the best way would be to unset this font-size only for this new content which can be enclosed in a div but I didn't found a way to do that.
Here is a jsfiddle: fiddle
It basicaly shows my problem, html tag styling is loaded with external js API and cannot do anything with that.
I am backend programmer so do not have much experience with all css stuff. Need help with that...
If you can add all your new content in a div, as you say, and then add a class to that div like:
<div class="content">…</div>
Then your css to set the font size would be:
html .content {
font-size: 100%;
}
Now for your specific problem:
Say the font-size was 100px (as an example);
the font-size set on <HTML> is 62.5%, so 62.5px;
The font-size for the content wants to be back to 100px, and %'s are relative, so if you do 100% on the <content> you get (100% * 62.5px = 62.5px);
You need your content bigger, and this works out to be (1 / 0.625 = 1.6x, or 160%)
I believe your solution is then to set css of:
html .content {
font-size: 160%;
}
You should not need the !important flag for this to work.
body {
font-size: 137.5% !important;/*62.5% = 100% - 37.5% so 137.5% will be original font size*/
}

Cannot style Jquery element using CSS

I have a Jquery selectmenu called #Main which implicitly gets a #Main-button. When I try to set #Main-button's width using css as
#Main-button {
width:200px;
}
it has no effect.
When I explicitly set
$( "#Main" ).selectmenu({ width:200})
it has the desired effect and under Firebug I see that it has appended a style="width:200" on the #Main-button, which is what I tried using CSS at the first place.
What is different? I've checked that the my CSS style sheet gets called AFTER the Jquery one, so there is no precedence issue
Also I notice that html elements turned to Jquery elements cannot be styled using CSS targeted at the specific element, even with the use of unique id's,but require the use of Jquery classes like .ui-menu etc
why do they behave differently? are there any specific styling gudilines when Jquery is involved?
In your CSS you've
#Main-button {
width:200px;
}
but the JS is adding dynamic inline style based on content. So it's having style attribute.
So in terms of CSS specificity their CSS beats you.
You must use !important in your rule to avoid overriding of your CSS.
#Main-button {
width:200px !important;
}
To style selectmenu or every jquery widget, you need to use jquery default classes. Your selector must be like
#Main-button.ui-selectmenu-menu li a
And also you can extend _renderItem and _renderMenu functions of selectmenu for different styling.

Overriding CSS from element.style created by server side JS

I have a reference to a server side JS file that dynamically creates divs on my page. I am trying to override the css that is inline for the divs that are created but I have not been able to do so.
I have tried !important and the style that is created by the JS still trumps everything I do.
When i look at the style in the developer console of chrome it shows element.style as being the style that "won" over my style
I do not have access to edit the JS file on the server.
I place this in my page and it dynamically creates the divs and styles them.
<head>
<style>
#id
{
background-color: blue; !important;
display:block; !important;
}
.class
{
background-color: blue; !important;
}
</style>
</head>
<script src="http://xxx/xxx/xxxxx/xxxx.ashx?blank=xxxx" type="text/javascript" charset="utf-8"></script>
You can create your own javascript to restyle the divs created by the server javascript.
The CSS !important tag does sound like your answer here but sometimes you need to ensure your CSS declaration is specific enough to the element, i.e.:
<div>
<a style="color:#F00;">A Link</a>
</div>
If I apply the below CSS the inline style or #F00 will still win:
div {color:#fff !important;}
But if I am specific with my CSS declaration i.e:
div a {color:#000 !important;} <--Notice the 'a' tag
Then my link will be #000. This does not matter if the link was loaded in with JavaScript or not.
See my JSFiddle Example: http://jsfiddle.net/zqpy0r6c/
More technical info can be found at
When does CSS's !important declaration not work?
The CSS given in the style attribute on an element always wins over the stylesheets. The best option to override this CSS is to edit the style attribute using some JS:
<script>
function clearInlineStyling(element){
element.style= null;
}
</script>
Next you have to watch the html for your script to add new elements, find them and remove their styling. I would suggest JQuery for this.

Modify CSS psuedo selector style in sencha

I am developing a web app in sencha touch. I need to dynamically change the style for one of the class with psuedo element.
Below is my element in the css file..
.testdiv::before{
margin-left: -0.4em;
margin-top: -0.10em;
}
I need to change the margin-top values dynamically in the code as the style needs to be changed in different screens.
I tried
Ext.select(".testdiv").setStyle('margin-top','1em').
But this doesn't apply style to the psuedo element ": before".. How can I do this ?
this is not possible even in jQuery, but I found a solution here: link
you need to add an extra class to your testdiv elements, e.g. on and add a css rule:
.testdiv.on:before {
margin-top: 1em;
}

Overwrite auto generated css

I am using a Jquery wysiwyg editor which at runtime automatically adds code to the textarea.
My problem is that it's inserting an inline style of style="width:320px" and I need to take that off as I've already set the styles to make it go 100%
Is there anyway to remove or overwrite that code with jquery
It's basically adding an inline style to a div with a class called wysiwyg...
so:
<div class="wysiwyg" style="width:320px">
The editor I'm having the trouble with is called: jWYSIWYG
Here's a demo url: http://akzhan.github.com/jwysiwyg/help/examples/
If you want to override inline styles you have two options:
Pure CSS:
.wysiwyg {
width: 120px !important;
}
jQuery:
$(".wysiwyg").css({width:120});
If you want to use styles from somewhere else you can also do:
$(".wysiwyg").css({width:"inherit"});
Reset the width using jQuery:
$('.wysiwyg').css('width', '100%');
Alternatively, you could remove the style attribute altogether:
$('.wysiwyg').removeAttr('style');
Have you tried declaring your own CSS with:
!important
eg.
#textarea-id { width: 300px !important; }
You can either define a new css rule with !important, or use jquery:
$("rule target").width(value);
This should work for you:
$('.wysiwyg').removeAttr("style");
or alternatively you can set the width to 100%
$('.wysiwyg').css("width", "100%");
You can remove undesired attributes on server-side with removeAttribute() DOM-method if you have server-side DOM manipulation module.
Or you can try to create your own slightly modified version of your WYSIWYG JS module.

Categories

Resources