I have the following structure:
<div class="container">
<div class="text1">...</div>
</div>
<div class="aside">
<div class="text2">...</div>
</div>
Is it possible when user is using mobile to get this structure:
<div class="container">
<div class="text2">...</div> (should be on top place)
<div class="text1">...</div>
</div>
<div class="aside"> (this class can be hidden)
</div>
I do not prefer the option with display: none/block. Is there way to do this with javascript?
Thank you!
This would be an easy approach in jQuery, but as #messerbill already mentioned, I would recommend you, to use responsive CSS frameworks such as Bootstrap or Bulma.
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
$(".text2").prependTo(".container");
}
CodePen: https://codepen.io/dmnktoe/pen/GzwQaR
Related
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!
This may seem weird, I want to create a header as simple as this of Stack Overflow so I've been struggling writing the right codes.
<template name="DashboardLayout">
<hr>
<div class="row">
<div col-md-8 col-md-offset-9><center><input type="text" name="search" placeholder="Search.."></center> </div>
<div col-md-4 ><center><label>Profile</label></center> </div>
<div col-md-4 ><center><label>Settings</label></center> </div>
<div col-md-4 ><center><label>Videos</label></center> </div>
<div col-md-4 ><center><div class="dropdown">
<div class="dropbtn">Dropdown</div>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div></center> </div>
</div>
<hr>
</template>
How can I achieve this using Bootstrap?
What are you asking for ? to give you the full HTML CSS and JS is needed ?
Check this link in Bootstrap the default example es basically what you want.
Logo, links (text or icon links), search bar and dropdown.
All responsive.
Then just play around the styles to get a better copy of this.
What you can do is add some custom classes for existing tags and write your own styles for corresponding classes.
or If you need simple customised version of this you can use this to build it easier
or this one https://work.smarchal.com/twbscolor/
read this if you want even mature look for your nav bar http://blog.jetstrap.com/2013/07/less-like-bootstrap/
I have been struggling for some time on how to use shapes in Semantic UI.
I have been trying an example from their site http://semantic-ui.com/modules/shape.html#/definition but the animations are not working properly for me.
HTML CODE :
<div class="ui cube shape">
<div class="sides">
<div class="active side">
<div class="content">
<div class="center">
1
</div>
</div>
</div>
<div class="side">
<div class="content">
<div class="center">
2
</div>
</div>
</div>
</div>
</div>
JAVASCRIPT:
$('#btn').click(function(){
$('.shape').shape('flip up');
});
It's just a JQuery version problem:
This fiddle works.
This one doesn't.
So check the JQuery version you're using, it seems that the version should be upper than 1.8.
Semantic UI and Bootstrap will not play nice together when it comes to Shapes. You will have to manually remove the following CSS in Bootstrap to make it work:
.hidden {
display: none !important;
}
If having a .hidden class is crucial to your operation, rename it instead of removing it. Although I'm not familiar enough with Boostrap's inner workings to know if there are any internal dependencies on that class.
Please see below example of HTML structure
<div data-role="page" id="p1">
<div data-role="header"><h1>Header</h1></div>
<div data-role="content">
Click Me
</div>
<div data-role="footer"><h4>Footer</h4></div>
</div>
<div data-role="page" id="p2">
<div data-role="header"><h1>Header 1</h1></div>
<div data-role="content">
Page Two
</div>
<div data-role="footer"><h4>Footer</h4></div>
</div>
jquery for same
$('#p1').live('pagecreate', function(e){
$("#add").click(function(e) {
$.mobile.changePage('#p2', { transition: "flip"} );
});
});
The above example is working fine but header part is repeating.
So how to avoid this issue because I am using same header as well as footer part for each data-role="page"?
There seems to be no nice "built-in" method to do it. You can find some workarounds here: jQuery Mobile: Use same header footer for all pages
I'm working on a responsive tumblr-theme based on the 1140GRID. To make the static videos fit the column, I used the jquery fitvids plugin.
My setup code looks like this:
$(document).ready(function(){
$("#post_{PostID}").fitVids();
});
and the accompanying html like this:
<div class="container">
<div class="row">
<div class="ninecol"> //grid I want it to fit into
{Block:Video}
<div id="post_{PostID}">
{Video-500}
</div>
{/Block:Video}
</div>
</div>
</div>
How do I trigger fitVids for multiple, dynamically generated ids on a page?
Thank you!
You may want to put that closing DIV inside the video block.
<div class="container">
<div class="row">
<div class="ninecol"> //grid I want it to fit into
{Block:Video}
<div id="post_{PostID}">
{Video-500}
</div>
{/Block:Video}
</div>
</div>
</div>
Then, you could target all the subdivs of ninecol.
<script>
$(document).ready(function(){
$('.ninecol > div').fitVids();
});
</script>