Rearrange content based on window size - javascript

I need to rearrange some content based on window/screen size.
This is how it looks when in full:
And this is what I need when screen size 768 or less:
This is my code structure:
<div class="container">
<div class="row">
<div class="col-md-9 site-main-content">
<div class="content">
<!--Main content-->
</div>
</div>
<div class="col-md-3 site-sidebar-content">
<div class="box-1"></div>
<div class="box-2"></div>
<div class="box-3"></div>
</div>
</div>
</div>
Not sure how to achieve this.
Update: I can not use hidden property. Box 1 contains some ajax search form. If I put it above main content (on full screen) and set display none, ajax form doesn't work anymore. So I am looking for a javascript snippet to remove box 1 from it's location and load it above main content when on smaller screen.

I have used hidden classes in my example please check and let me know...
Updated Fiddle
HTML
<div class="row">
<div class="col-md-9">
<div class="box-1 hidden-md hidden-lg">
Box 1
</div>
<div class="mainBox">
<div class="content">
Main Content
</div>
</div>
</div>
<div class="col-md-3">
<div class="box-1 hidden-xs hidden-sm">
Box 1
</div>
<div class="box-2">
Box 2
</div>
<div class="box-3">
Box 3
</div>
</div>
</div>
CSS
.mainBox{
background:green;
min-height:300px;
padding:10px;
margin-bottom:10px;
}
.box-1{
background:red;
min-height:100px;
padding:10px;
margin-bottom:10px;
}
.box-2, .box-3{
background:#00A2E8;
min-height:100px;
padding:10px;
margin-bottom:10px;
}

Related

How to put a fixed div between header and footer

I would need to make sure that when the page is scrolled the div ".col-left" is placed in the fixed position (it must start from the top ".ctn-parte-iniziale").
Also, when it gets to the bottom of the footer ".bg-orange" it must stop and it must no longer be in the fixed position.
How can I do?
A thousand thanks!
This is my code:
<div class="ctn-parte-iniziale">...</div>
<div id="main-site">
<div class="bg-white">
<div class="container">
<div class="page_layout page_margin_top clearfix cnt-corsi-gen">
<div class="row">
<div class="col-md-3 col-lg-3 col-xs-12">
<div class="col-left">
...
</div>
</div>
<div class="col-md-9 col-sm-9 col-xs-12">
...
</div>
</div>
</div>
</div>
</div>
</div>
<div class="bg-orange"></div>```
Try adding this to col-left. In 2021 you may not need the webkit line but try it first.
So, in CSS
div.sticky {
position: -webkit-sticky; <!-- Safari/Chrome --->
position: sticky;
top: 0;
}
And then in your HTML
<div class="col-left sticky">

Removing space between columns in html table

I have an HTML table which is as following
Some of the code is below:
<table>
<tr>
<td>
<div style="width: 4.999999998%;" class="col-md-.6 col-sm-6">
<div style="height: 103px; width:80px;" class="location-block">
<div class="city-img">
<img src="worldwide-location.png" class="img-responsive" alt="city">
<div class="overlay-bg"></div>
</div>
<div class="city-dtl text-center">
Read More
</div>
</div>
</div>
</td>
<td>
<div style=" width: 4.999999998%;" class="col-md-.6 col-sm-6">
<div style="height: 50px; width:80px;" class="location-block">
<div class="city-img">
<img src="images/wedding-location/location-1.jpg" class="img-responsive" alt="city">
<div class="overlay-bg"></div>
</div>
<div class="city-dtl text-center">
Read More
</div>
</div>
<div style="height: 50px; width:80px; margin-top: -27px;" class="location-block">
<div class="city-img">
<img src="images/wedding-location/location-1.jpg" class="img-responsive" alt="city">
<div class="overlay-bg"></div>
</div>
<div class="city-dtl text-center">
Read More
</div>
</div>
</div>
</td>
the table looks like the following:
enter image description here
As you can see the white space between each column, I am trying to reduce the white spaces between them, but this is not happening, I have tried padding-left and also gave cell spacing to the table, its not changing, can anyone tell me whats wrong with my code? Thanks in advance.
If you decide to use Bootstrap grid you can avoid to use HTML table tag, and use a structure like this:
<div class="row">
<div class="col margin-col">
<div>Images and content 1</div>
</div>
<div class="col margin-col">
<div>Images and content 2</div>
</div>
</div>
usign a proper CSS rule like this to set padding (inside columns) and margin (outside columns):
.margin-col{
padding: 10px;
margin: 20px;
}

whats the best way to control showing and hiding multiple charts and divs in a page

I am new in javascript,i have a page consist of different Card layouts and each card has its own chart or buttons or grids,some of them should be hidden by default and some of them should be hide or visible by click,since the page is growing by more demands ,controlling these hid/e/show is becoming a nightmare,i would like you tell me whats the best way to do this?for example i have a following div which has a chart:
<section style="width:100%;margin-top:2%;" >
<div id="btnCurrentStatID" class="card ShowHide" style="float:right;width:20%;height:350px;display:none;">
<div class="wrapper">
<div class="containerBtns" style="width:100%;float:right" >
<button type="button" id="btnErrorStat" class="btnsForCrew-Common "></button>
<button type="button" id="btnIdle" class="btnsForCrew-Common "></button>
<button type="button" id="btnService" class="btnsForCrew-Common "></button>
<button type="button" id="btnLinkDn" class="btnsForCrew-Common"></button>
<button type="button" id="btnDataIn" class="btnsForCrew-Common" ></button>
<button type="button" id="btnrepOff" class="btnsForCrew-Common"></button>
</div>
</div>
</div>
<div id="faultStatChartID" class="card ShowHide" >
<div id="chart">
</div>
</div>
<div id="pieChartID" class="card ShowHide">
<div id="pieChart"></div>
</div>
</section>
<section style="width:100%;float:left;margin-top:3%;" id="faultStatSubGroupsSec">
<div id="subcatNameChartSectionID" class="card" style="width:49%;float:left;display:none">
<div class="container">
<div id="subcatNameChart"></div>
</div>
</div>
<div id="subcatErrorChartSectionID" class="card" style="width:49%;float:right;display:none">
<div class="container">
<div id="subcatErrorChart"></div>
</div>
</div>
<div id="subCatIdnameSectionID" class="card" style="width:49%;float:left;display:none">
<div class="container">
<div id="subCatIdname"></div>
</div>
</div>
<div id="subCatITurNameSectionID" class="card"style="width:49%;float:right;display:none">
<div class="container">
<div id="subCatITurName"></div>
</div>
</div>
<div></div>
<div></div>
</section>
i gave it showhide class,and by default its hidden,when i click on filter button it will be visible,and other divs should be hidden,it this continues,imagine how many time i should do it and manage to control them all,
$(".ShowHide").css("display", "block");
$("#subcatNameChartSectionID").hide();
$("#subcatErrorChartSectionID").hide();
$("#subCatIdnameSectionID").hide();
$("#subCatITurNameSectionID").hide();
A way would be to use a class for hiding.
.hide {
display: none;
}
And a hideable class for accessing every item that should be able to be hidden. The class hide can be added to hide the element.
<div class="hideable">1 hideable</div>
jQuery offers methods for class manipulation:
$('.hideable').toggleClass('hide');
$('#unique4').removeClass('hide');
$('#unique5').addClass('hide');
Here is the full snippet code:
$('.hideable').toggleClass('hide');
$('#unique4').removeClass('hide');
$('#unique5').addClass('hide');
.hide {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="unique1" class="hideable">
1 hideable
</div>
<div id="unique2" class="hideable">
2 hideable
</div>
<div id="unique3" class="hideable hide">
3 hideable
</div>
<div id="unique4" class="hideable hide">
4 hideable
</div>
<div id="unique5" class="hide">
5 other
</div>

Isotope filtering with bootstrap

I am working on using the isotope plugin with bootstrap and have run into some trouble. I need the col-md-4 div around the isotope element gallery-image-a, so the .grid is not a direct parent of the isotope element. Once I get rid of the col-md-4 div that I need, the plugin works.
Was wondering if anyone knows of a way to keep the existing markup while maintaining the functionality of the isotope plugin?
HTML Snippet 1
<span class="menu-button" id="food-button">Food</span>
<span class="menu-button" id="staff-button">Staff</span>
<span class="menu-button" id="all-button">All</span>
HTML Snippet 2
<div class="container">
<div class="row grid">
<div class="col-md-4">
<a class="gallery-image-a food"></a>
</div>
<div class="col-md-4">
<a class="gallery-image-a staff"></a>
</div>
<div class="col-md-4">
<a class="gallery-image-a food"></a>
</div>
<div class="col-md-4">
<a class="gallery-image-a staff"></a>
</div>
<div class="col-md-4">
<a class="gallery-image-a food"></a>
</div>
<div class="col-md-4">
<a class="gallery-image-a staff"></a>
</div>
</div>
</div>
CSS
.gallery-image-a {
display:block;
height:360px;
background-position:center center;
transition: ease all 950ms;
background-repeat:no-repeat;
box-sizing: border-box;
border:10px solid #fff;
background-size:cover;
background-image: url('http://animalpetdoctor.homestead.com/acat1.jpg');
}
JavaScript
$grid = $('.grid');
$grid.isotope();
$('#food-button,#staff-button, #all-button').click(function(){
var id = $(this).attr('id');
var className = id.replace("-button", "");
if (className == 'all') {
$grid.isotope({ filter: '*' });
return false;
}
$grid.isotope({ filter: '.' + className });
});
2 problems. First, the filter works on children so change HTML to this
<div class="container">
<div class="row grid">
<div class="col-md-4 food">
<a class="gallery-image-a"></a>
</div>
<div class="col-md-4 staff">
<a class="gallery-image-a"></a>
</div>
<div class="col-md-4 food">
<a class="gallery-image-a"></a>
</div>
<div class="col-md-4 staff">
<a class="gallery-image-a"></a>
</div>
<div class="col-md-4 food">
<a class="gallery-image-a"></a>
</div>
<div class="col-md-4 staff">
<a class="gallery-image-a"></a>
</div>
</div>
</div>
second, even if it does work, you won't see it. add min-width to class
min-width: 100px;
here's a working fiddle: https://jsfiddle.net/shirandror/rvnrk2kc/
Have you tried defining the itemSelector option to .col-md-4 or better declaring a designated class for that like "grid-item"?
$('.grid').isotope({
itemSelector: '.grid-item'
});
EDIT:
I put up a working example on codepen:
http://codepen.io/iCymiCy/pen/grwpXp?editors=1111

get id of focused element using javascript

I have single Html page having many anchor elements. This single Html page contains many div parts. Only one part displays at time and a anchor specific to this part will focused. this html also contain a div to open popup. When this popup will open anchor specific to this will focused. Now I want get the anchor focused earlier to popup anchor focused.
My code is following:-
<body onload="Main.onLoad();" onunload="Main.onUnload();">
<a href='javascript:void(0);' id='anchor' onkeydown='Main.MainKeyHandler();'></a>
<a href='javascript:void(0);' id='anchorAboutUs' onkeydown='Main.MainKeyHandler1();'></a>
<a href='javascript:void(0);' id='anchorSecondScreen' onkeydown='Main.MainKeyHandler2();'></a>
<a href='javascript:void(0);' id='popupanchor' onkeydown='PopupKeyHandler();'></a>
<div id="ParentDiv">
<div id="SplashScreenDiv">
<div id="SplashScreen"></div>
</div>
<div id="Logo"></div>
<div id="Header"></div>
<div id='messagePopup' style='position:relative;width:500px;z-index:1000;background-color:#ffffff;'><div ></div ><div id='popupReturn'>Return</div><div>
<div id="PopUp">
<div id="YesBtn"></div>
<div id="NoBtn"></div>
</div>
<div id="FirstScreen">
<div id="testinfo" style="color:#ff0000; width:600px; height:50px; overflow:hidden; font-size:xx-large; "></div>
<div id="btn_horoscope"></div>
<div id="btn_aboutus"></div>
</div>
<div id="AboutUsScreen" >
<div id="AboutUsImgDiv">
<div id="AboutUsImg"></div>
</div>
<div id="aboutUsInfoDiv">
<div id="aboutUsInfo"></div>
</div>
</div>
<div id="SecondScreen" >
<div id="HoroscopeImg" class="HoroImage"></div>
<div id="SelSunSignMsgDiv">
<div id="SelSunSignMsg">Select your SunSign </div>
</div>
<div id="SelSunSignDiv">
<div id="SelSunSign">
<div id="SunSign_0"></div>
<div id="SunSign_1"></div>
<div id="SunSign_2"></div>
<div id="SunSign_3"></div>
<div id="SunSign_4"></div>
<div id="SunSign_5"></div>
<div id="SunSign_6"></div>
<div id="SunSign_7"></div>
<div id="SunSign_8"></div>
<div id="SunSign_9"></div>
<div id="SunSign_10"></div>
<div id="SunSign_11"></div>
</div>
</div>
</div>
</div>
</body>
any help will appriciated
You need document.activeElement.id. You can find more information here, which has been criticized before.

Categories