I want to force jQuery mobile to use my own CSS classes to override default values.
Changing the jQuery CSS classes (like ui-controlgroup) is not an option since I just want to change the style in some cases.
When I put the content of my CSS class in the style attribute of the div, my style is applied, but I don't want to use this attribute.
I tried adding my classes when the "mobileinit" event is fired, but it didn't work either.
Here is an example, my class is called "footer-column-left":
<div id="footerMainpage" data-role="footer" data-position="fixed" data-theme="a" class="ui-grid-b">
<!-- column 1 -->
<div class="ui-block-a" class="footer-column-left">
<div data-role="controlgroup" data-type="horizontal">
<button id="buttonLeft" data-icon="arrow-l" data-iconpos="notext">Move left</button>
</div>
<div data-role="controlgroup" data-type="horizontal">
<button id="buttonChooseTool" data-icon="edit" data-iconpos="notext">Choose tool</button>
<button id="buttonUndo" data-icon="back" data-iconpos="notext">Undo</button>
<button id="buttonRedo" data-icon="forward" data-iconpos="notext">Redo</button>
<button id="buttonSave" data-icon="check" data-iconpos="notext">Save</button>
</div>
</div>
<!-- ... -->
</div>
The CSS looks like this:
.footer-column-left { display: inline-block !important; text-align:left !important; padding-left: 10px !important; }
Thanks in advance for your help!
Edit: Adding the classes when the "pageinit" event is fired worked for me, so no further help is needed ;-)
These two things worked for me:
adding the css class when the "pageinit" event is fired using:
$('#footerColumnLeft').addClass('footer-column-left');
using the id in the CSS selector:
#footerColumnLeft { text-align:left; padding-left: 10px; }
Related
I would like to remove this footer from my page by specifying only this section to display: none
Eg: "div class="poweredby" display: none" but I'm not sure how to do it...
Here is the Div class I would like to assign the attribute to
<div class="poweredby">
<p class="report">If this site is spam or abuse,
<a id="reportLink" target="_blank" href="https://app.grate.cm/grate/report.html?site=301708&url=https://app.grate.cm/grate/builder/301708#/">report here.</a>
</p>
<p class="poweredby-text">This site was built with SEMTotal.</p>
</div>
Have you tried the following:
<div class="poweredby" style="display: none">
...
</div>
You can either set the attribute directly via style attribute like the code above or within separate .css file like the code below
.poweredby{
display: none;
}
You can also use javascript to hide an element like this:
document.querySelector('.poweredby').style.display = "none";
<style>
.hide{display:none;}
</style>
<div class="poweredby hide">
<p class="report">If this site is spam or abuse,
<a id="reportLink" target="_blank" href="https://app.grate.cm/grate/report.html?site=301708&url=https://app.grate.cm/grate/builder/301708#/">report here.</a>
</p>
<p class="poweredby-text">This site was built with SEMTotal.</p>
</div>
Is there a way to not apply certain CSS classes to a particular class or id? I have an image in a grid using the Materialize CSS framework. I would like it to break outside the grid and reach the corners of the screen. Essentially I want to exclude the .container, .row, and the .col css styles from a class called .break-grid. However, I would still like other styles to apply. (in this case .parallax-container and .parallax.
Is there a better way to go about "breaking out of the grid" than the way I'm pursing? A pure CSS/HTML solution would be preferred but I am willing to use Javascript/Jquery to solve this as well.
Here is a code sample of what I'm trying to do. I have no CSS as this is a css framework (I do not want to edit the framework). I would need css to fix change it I presume.
<div class="container">
<div class="row">
<div class="col">
<!-- Apply here -->
<h1>Things</h1>
<!-- Don't apply here -->
<div class="parallax-container break-grid">
<div class="parallax">
<%= image_tag('infos/home/test_parallax.jpg')%>
</div>
</div>
<!-- Apply here -->
<h2>Stuff</h2>
</div>
</div>
</div>
You can use the :not() CSS pseudo-class. ( On MDN )
.container > .row > .col > *:not(.parallax-container) {
//styling
}
Note: realize this is a demonstration, I'm not going through every BootStrap property that would be applied innately, and you would have to do that yourself:
.container > .row > .col > *:not(.parallax-container) {
background: rgba(0,0,255,.5);
}
<div class="container">
<div class="row">
<div class="col">
<h1>Things</h1>
// Do not apply here
<div class="parallax-container break-grid">
<div class="parallax">
<span>whatever</span>
</div>
</div>
<h2>Stuff</h2>
</div>
</div>
</div>
Personally, I would advise you to listen to everyone else and just build this thing using Cascading styles. :not is an excellent tool, but I get the impression that you're likely to abuse it/over-rely on it and get yourself in a bind style-wise.
In any case, good luck!
I have a button inside a div which is inside a div and I am trying to have the button in and inner div ignore the parent divs padding here is my code
<div style="padding:10px; background:red;">
<div style="width:100%; margin:-10px;">
<button style="background:blue; width:100%">
Some test text
</button>
</div>
</div>
Can be seen in fiddle here https://jsfiddle.net/5sc5y4z3/.
setting the margin:-10px works on the leftside but then, the button is 20px short on the right side.
How can I extend it so it fills the whole width of the parent div?
Thanks
100% width doesn't include the negative margins. You need to add it back:
<div style="width:calc(100%+20px); margin:-10px;">
CSS calc() is supported in all modern browsers since IE9, so it's safe to use in most web development projects.
Use this instead:
HTML:
<div style="padding:10px; background:red;">
<div style="width:100%;background-color:lime">
<button style="background:blue; width:100%">
Some test text
</button>
</div>
</div>
It's getting clipped, so you could also use the following to mask the right side:
HTML
<div style="overflow: hidden; margin:-10px;">
I'm wondering how to achieve this in CSS (and less and jquery is also good :)
I have the slider, but it looks like this:
I want it to look like this:
The fonts is of curse no problem, not making the stuff round and so on, removing border and stuff...
I'm wondering how I can achieve this little pins: in CSS, so it keeps the right dimensions, and squeezes together when the screen-size is different. By the way, thanks a bunch to danielcrisp, for this awesome slider for AngularJS.
Any help is appreciated.
Came up with this solution
http://codepen.io/anon/pen/bkdAs
HTML:
<div class="slider">
<div class="pin">
</div>
<div class="pin">
</div>
<div class="pin">
</div>
<div class="pin">
</div>
<div class="pin">
</div>
<div class="pin">
</div>
<div class="pin">
</div>
<div class="pin">
</div>
<div class="pin">
</div>
<div class="pin">
</div>
</div>
CSS:
.slider{
width:500px;
height:20px;
border-bottom:2px solid red;
}
.slider .pin{
height:100%;
width:10%;
float:left;
border-right:2px solid red;
transform: translateY(55%);
box-sizing: border-box;
}
.slider .pin:last-child{
display:none;
}
Might be easier to achieve using some javascript though for appending the divs inside the slider
I think the best solution would be to make 8 elements with position absolute and left 10*n%.
It may be possible to use css pseudo element instead of DOM elements to prevent bloating your HTML.
Edit: it turns out you can't chain css pseudo-elements, you'll have to append real DOM elements to your code.
http://jsfiddle.net/0hea6ody/
<span class="grad grad1"></span>
...
<span class="grad grad9"></span>
I have a button in my HTML, and I want some content to appear just right under that button, and it should be on top of all other content, and shouldn't move any existing content. How can I achieve it?
Not sure exactly what you are trying to achieve, but check out this example for using the CSS property position:
<p>Other content</p>
<button>Button Text</button><br />
<div style="position:absolute; color:red;">Absolute Text</div>
<p>Other content</p>
Try it: http://jsfiddle.net/tczc5/
Put that content into a div and use
position:absolute;
It should look like this:
<div class="wrapper" style="position:relative;">
<button ..... >
<div class="yourContent" style="position:absolute; top:10px; left:0px;">
<!-- put your content here -->
</div>
</div>
If you want to show this content only after pressing the button, then change it to:
<div class="wrapper">
<button class="yourButton" ..... >
<div class="yourContent hidden">
<!-- put your content here -->
</div>
</div>
Define css styles in stylesheet like:
.wrapper {position:relative;}
.wrapper .yourButton {position:absolute; top:0; left:0}
.yourContent {position:absolute; top:20px; left:0}
.hidden {display:none;}
And then javascript (using jQuery):
$('.yourButton').click(function(){
$('.yourContent').removeClass('hidden');
});
Just a simple example, that you will have to tweak.
Here is a good article on css position can be found on alistapart.
Looking at your question a must read if you're not 100% familiar with positioning.