I have a conditional display of panels in my application. The panels are separated by horizontal and vertical splitters. I would like to hide the horizontal splitter bar if I am hiding the panel below it.
Something similar to this -
<div id="myPanels" class="splitter">
<div class="leftPane" style="width:30%">
<div class="horizontalSplitter">
<div id="topPane" style="overflow-y: scroll "></div>
<div id="bottomPane"></div>
</div>
</div>
<div class="rightPane" id="rightPanel">
<div class="splitter" id="splitterRight">
<div class="leftPane" style="width:50%" id="hleftPanel">
</div>
<div class="rightPane" style="width:50%" id="hRightPanel">
</div>
</div>
</div>
$("#myPanels").splitter();
In this case if someone wants to hide the horizontal splitter bar with the #topPanel the code will be:
$("#topPanel").hide();
$("#topPanel").next().hide();
Related
I have some simple HTML displaying a calendar as below. Once rendered the calendar has either 5 or 6 rows relative to the number of days in the month and which day of the week the 1st of the month is. Each day cell is clickable to execute some javascript. This all works fine on all desktop browsers and on iOS. However, with all versions of Android tested the bottom row of cells do not trigger the onclick event when clicked. Any ideas?
<div id="cal">
<div id="cal-caption">
<span id="cal-last"><img src="/assets/images/arrow-left.png"></span>
<span id="cal-month">May 2021</span>
<span id="cal-next"><img src="/assets/images/arrow-right.png"></span>
</div>
<div id="cal-header">
<div class="cal-head">MON</div>
<div class="cal-head">TUE</div>
<div class="cal-head">WED</div>
<div class="cal-head">THU</div>
<div class="cal-head">FRI</div>
<div class="cal-head">SAT</div>
<div class="cal-head">SUN</div>
</div>
<div id="cal-body">
<div class="cal-row">
<div id="cl00" onclick="cal.click('cl00')"></div>
<div id="cl01" onclick="cal.click('cl01')"></div>
<div id="cl02" onclick="cal.click('cl02')"></div>
<div id="cl03" onclick="cal.click('cl03')"></div>
<div id="cl04" onclick="cal.click('cl04')"></div>
<div id="cl05" onclick="cal.click('cl05')"></div>
<div id="cl06" onclick="cal.click('cl06')"></div>
</div>
<div class="cal-row">
<div id="cl10" onclick="cal.click('cl10')"></div>
<div id="cl11" onclick="cal.click('cl11')"></div>
<div id="cl12" onclick="cal.click('cl12')"></div>
<div id="cl13" onclick="cal.click('cl13')"></div>
<div id="cl14" onclick="cal.click('cl14')"></div>
<div id="cl15" onclick="cal.click('cl15')"></div>
<div id="cl16" onclick="cal.click('cl16')"></div>
</div>
<div class="cal-row">
<div id="cl20" onclick="cal.click('cl20')"></div>
<div id="cl21" onclick="cal.click('cl21')"></div>
<div id="cl22" onclick="cal.click('cl22')"></div>
<div id="cl23" onclick="cal.click('cl23')"></div>
<div id="cl24" onclick="cal.click('cl24')"></div>
<div id="cl25" onclick="cal.click('cl25')"></div>
<div id="cl26" onclick="cal.click('cl26')"></div>
</div>
<div class="cal-row">
<div id="cl30" onclick="cal.click('cl30')"></div>
<div id="cl31" onclick="cal.click('cl31')"></div>
<div id="cl32" onclick="cal.click('cl32')"></div>
<div id="cl33" onclick="cal.click('cl33')"></div>
<div id="cl34" onclick="cal.click('cl34')"></div>
<div id="cl35" onclick="cal.click('cl35')"></div>
<div id="cl36" onclick="cal.click('cl36')"></div>
</div>
<div class="cal-row">
<div id="cl40" onclick="cal.click('cl40')"></div>
<div id="cl41" onclick="cal.click('cl41')"></div>
<div id="cl42" onclick="cal.click('cl42')"></div>
<div id="cl43" onclick="cal.click('cl43')"></div>
<div id="cl44" onclick="cal.click('cl44')"></div>
<div id="cl45" onclick="cal.click('cl45')"></div>
<div id="cl46" onclick="cal.click('cl46')"></div>
</div>
<div id="cal-extra" class="cal-row">
<div id="cl50" onclick="cal.click('cl50')"></div>
<div id="cl51" onclick="cal.click('cl51')"></div>
<div id="cl52" onclick="cal.click('cl52')"></div>
<div id="cl53" onclick="cal.click('cl53')"></div>
<div id="cl54" onclick="cal.click('cl54')"></div>
<div id="cl55" onclick="cal.click('cl55')"></div>
<div id="cl56" onclick="cal.click('cl56')"></div>
</div>
</div>
<div id="cal-footer">
<div class="cal-foot"></div>
<div class="cal-foot"></div>
<div class="cal-foot"></div>
<div class="cal-foot"></div>
<div class="cal-foot"></div>
<div class="cal-foot"></div>
<div class="cal-foot"></div>
</div>
The HTML is part of a bootstrap responsive layout. The issue only occurs in Chrome, when the viewport is narrow (phone sized). The calendar sits in the left hand 6 columns, with some text in the right 6 columns. As the page cascades and the viewport narrows the right hand 6 columns drop below the left hand columns but crucially in Chrome there is an overlap. The overlap is obscuring the bottom row of the calendar. To solve the issue I added a high z-index to the left hand columns and a low z-index to the right. So now the overlap still occurs but the calendar is on top and still clickable. Many thanks to T.Trassoudaine for pointing me in the right direction.
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;
}
I'm trying to build a gallery page use Flexslider in a site built with Foundation. If I build the Flexslider on its own, it works fine, but when I incorporate it into a page with Foundation it stops working. I can only get any of the images to load by adding in some extra CSS to force the initial image to load, but the thumbnails do not control which slide is shown (nor do they even show as a clickable element) and none of the navigation controls appear. Everything related to both Foundation and Flexslider has been copied from a working example to avoid typing errors.
As a work around, I did the following...
I created thumbs with the code below:
<div class="flexslider-controls">
<ol class="new-nav">
<li>
<div class="medium-3 columns">
<div class="row">
<div class="columns">
<img src="images/slider-thumb-1.jpg" />
</div>
</div>
</div>
</li>
<li>
<div class="medium-3 columns">
<div class="row">
<div class="columns">
<img src="images/slider-thumb-1.jpg" />
</div>
</div>
</div>
</li>
<li>
<div class="medium-3 columns">
<div class="row">
<div class="columns">
<img src="images/slider-thumb-2.jpg" />
</div>
</div>
</div>
</li>
<li>
<div class="medium-3 columns">
<div class="row">
<div class="columns">
<img src="images/slider-thumb-3.jpg" />
</div>
</div>
</div>
</li>
</ol>
</div>
Then using some jquery, as you click on each thumb, it will change the slider to the corresponding slide:
$(document).ready(function () {
$(document).on('click','.new-nav li a',function(){
var index = $('.new-nav li a').index(this) + 1;
$('.videos-slider').flexslider(index);
return false;
});
});
I have tried to use the foundation framework with the orbit sliders and when I test it on the browser, the slider performs the transitions, however the animations are not being performed and simply fades from 1 section to another.
Only when I try to resize the window, it works as expected.
After further inspection, apparently when the slider attempts to change using 'horizontal-push' the variable this.outerWIdth for the orbit-slide div is 1 instead of the actual width of the div.
Here is my markup for the features slider which I am using orbit for.
<div id="features-wrap" class="wrapper">
<!-- Insert Features Here -->
<div id="features-gutter" class="row">
<section id="features" class="row">
<div id="welcome">
<div class="eight columns">
<h4>Welcome</h4>
<p>Hello.</p>
</div>
<div class="four columns">
<img src="img/content/promo1.jpg" alt="Promo Image 1" width="320" height="220">
</div>
</div>
<div id="decorated">
<div class="eight columns">
<h4>Decorated Apparel</h4>
<p>Some Text</p>
</div>
<div class="four columns">
<img src="img/content/promo2.jpg" alt="Promo Image 1" width="320" height="220">
</div>
</div>
<div id="promotional">
<div class="eight columns">
<h4>Protional Products</h4>
<p>Some Text</p>
</div>
<div class="four columns">
<img src="img/content/promo3.jpg" alt="Promo Image 1" width="320" height="220">
</div>
</div>
</section>
</div>
<!-- End Insert Features Here -->
</div>
end of code
Here is also the Javascript I am calling.
var featuresSlider = $('#features');
featuresSlider.orbit({fluid: '2x1', animationSpeed: 650, animation: 'horizontal-push' });
Is there anything I am doing with the code or is it really a bug with the current script for orbit?
Thanks.
found the answer. I in order for the slider to get the right outerWidth I had to go to the div that initializes the sliders and overide the width that is set by the plugin in the css file. For example:
If features controls my orbit slider, then i need to do this:
#features {
width: <set the width here> !important;
<any other styles here>
}
Thanks
I have this sortable's structure (it's a portlet).
<div id="sortable">
<div class="row">
<div class="window"></div>
<div class="gripper_v"></div>
<div class="window"></div>
</div>
<div class="gripper_h"></div>
<div class="row">
<div class="window"></div>
<div class="gripper_v"></div>
<div class="window"></div>
</div>
<div class="gripper_h"></div>
<div class="row">
<div class="window"></div>
<div class="gripper_v"></div>
<div class="window"></div>
</div>
</div>
'window' elements are sortables. Grippers shouldn't be sortables. I've specified in the Sortable options:
{ items: '.window' }
But I'm seeing that windows are sorted over grippers while I drag, which I don't want to. I want grippers to be invisible to the Sortable.
EDIT: Grippers are used to resize windows in both X and Y axis. With the given html code i will get this portlet.
PORTLET IMAGE
The problem occurs when sorting between windows of the same row (".gripper_v")
I'm not sure exactly what you're trying to do here (a screenshot might help), is the "gripper" the part of the "window" where the user should click to drag?
If that's the case, try adding the gripper within the window element like this:
<div id="sortable">
<div class="window">
<div class="gripper"></div>
</div>
<div class="window">
<div class="gripper"></div>
</div>
</div>