I'm using slick carousel (http://kenwheeler.github.io/slick/).
I have it set for 2 rows with 3 images per row. The trouble is, the second row is getting cut off right through the middle of each image.
Is this some known bug? Anything I can do?
html:
<div class="slick_slideshow" id="slideshow_houses">
<div>
<img src="img/slideshow_houses/image1.jpg" class="slideshow_houses_image" />
<div class="slick-credit">credit1</div>
</div>
<div>
<img src="img/slideshow_houses/image2.jpg" class="slideshow_houses_image" />
<div class="slick-credit">credit2</div>
</div>
<div>
<img src="img/slideshow_houses/image3.jpg" class="slideshow_houses_image" />
<div class="slick-credit">credit3</div>
</div>
<div>
<img src="img/slideshow_houses/image4.jpg" class="slideshow_houses_image" />
<div class="slick-credit">credit4</div>
</div>
<div>
<img src="img/slideshow_houses/image5.jpg" class="slideshow_houses_image" />
<div class="slick-credit">credit 5 </div>
</div>
<div>
<img src="img/slideshow_houses/image6.jpg" class="slideshow_houses_image" />
<div class="slick-credit">credit 6</div>
</div>
</div>
<!-- end slideshow -->
<div style="clear:both;"></div>
jquery:
$('#slideshow_houses').slick({
rows: 2,
slidesPerRow: 3
});
The code you have looks fine. Going by the comments, you had a div that contained the slideshow that had overflow:hidden. In general, any time you have cut-off content you should check any parent div for overflow:hidden.
Related
I have a xml like this and am trying to select the groupIdentifier element without the display:none child (would like to use the css "identifier" along with it) to finally select the input. Have been at this for hours and would like to call the xpath gods to help me out.
<div class="groupIdentifier">
<div>
<input class="inputClassIdentifier">
</div>
<div>
...
<div>
<div class="something">
... some more elements
</div>
<div class="identifier hidden" style="display: none">
... some more elements
</div>
<div class="something">
... some more elements
</div>
</div>
</div>
</div>
<div class="groupIdentifier">
<div>
<input class="inputClassIdentifier">
</div>
<div>
<div>
<div class="something">
... some more elements
</div>
<div class="identifier ">
... some more elements
</div>
</div>
</div>
</div>
Thanks
edit:
I have
//div[contains(#class, 'identifier') and not(contains(#style, 'display: none'))] which basically selects the identifier div of the second section.
What I need now is to select the input with class inputClassIdentifier within its parent.
Here's your xpath.
//div[#class='groupIdentifier' and div/div/div[not(contains(#style, 'display: none'))]]
I got it using descendant axis
//div[#data-testid='groupIdentifier' and descendant::div[contains(#class, 'identifier') and not(contains(#style, 'display: none'))]]//input[#name='inputClassIdentifier']
I am unsure of the best way to name my BEM blocks, where they require a wrapper.
For example, given the following markup:
<div class="products-list">
<div class="product__item">
<div class="product__item__title">Product 1</div>
<img class="product__item__image" />
</div>
<div class="product__item">
<div class="product__item__title">Product 2</div>
<img class="product__item__image" />
</div>
</div>
I feel that the top wrapper (products-list) is kind of lost.
It's obviously too deep to use something like:
products-list__product__item__image
So, how do we handle wrappers in BEM where the child elements are also wrappers?
With two blocks .product-list and product-item.
<div class="product-list">
<div class="product-list__item product-item">
<div class="product-item__title">Product 1</div>
<img class="product-item__image" />
</div>
<div class="product-list__item product-item">
<div class="product-item__title">Product 2</div>
<img class="product-item__image" />
</div>
</div>
Here the elements .product-list__item share the node with blocks .product-item.
Or, if the CSS rules for your list can be reused in your design, you can rename .product-list to a more generic .list:
<div class="list">
<div class="list__item product-item">
<div class="product-item__title">Product 1</div>
<img class="product-item__image" />
</div>
<div class="list__item product-item">
<div class="product-item__title">Product 2</div>
<img class="product-item__image" />
</div>
</div>
Below is the code that I want to convert to div.
I tried html2canvas but that did not worked somehow.
The div's uppelayer middlerlayer and bottomlayer are one above other making 3 layers.
<div id="container">
<div id="bottomLayer">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSivV5yARSKfCsfaFmdo1Iwc7muglbp92befBPfS7XxglZ0XrpU" id="preview2" />
</div>
<div id="mediumLayer">
<img src="http://f0.pepst.com/c/B7F2F3/402463/ssc3/home/038/amazing.beauties/diana_penty_02_12x92.jpg_480_480_0_64000_0_1_0.jpg" id="preview" />
</div>
<div id="main">
<img src="http://f0.pepst.com/c/B7F2F3/402463/ssc3/home/038/amazing.beauties/diana_penty_02_12x92.jpg_480_480_0_64000_0_1_0.jpg" id="jcrop_target" />
</div>
<div id="upperlayer"><canvas id="canvas2"></canvas></div>
</div>
The following FIDDLE shows my current markup.
HTML
<div class="popup-inner-content main-content">
<div class="inner-section one">
<!-- images -->
<div class="media pull-left">
<img src="#" />
</div>
<!-- text -->
<div class="media-aside pull-right">
<h4>Head</h4>
<p>Body</p>
</div>
</div>
<div class="inner-section three is-hidden">
<!-- images -->
<div class="media pull-left">
<img src="#" />
</div>
<!-- text -->
<div class="media-aside pull-right is-hidden">
<h4>Head</h4>
<p>Body</p>
</div>
</div>
<div class="inner-section two is-hidden">
<!-- images -->
<div class="media pull-left ">
<img src="#" />
</div>
<!-- text -->
<div class="media-aside pull-right">
<h4>Head</h4>
<p>Body</p>
</div>
</div>
<div class="thumbnail pull-left">
<!-- thumbnail -->
<div class="media-thumb one">
<img src="#" alt="media-thumbnail" title="media-thumbnail" />
<p>Anchot text</p>
</div>
</div>
<div class="thumbnail pull-left">
<!-- thumbnail -->
<div class="media-thumb two pull-left">
<img src="#" alt="media-thumbnail" title="media-thumbnail" />
<p>Anchor text</p>
</div>
</div>
<div class="thumbnail is-hidden">
<!-- thumbnail -->
<div class="media-thumb three ">
<img src="#" width="128" height="69" alt="media-thumbnail" title="media-thumbnail" />
<p>Anchor Text</p>
</div>
</div>
</div>
</div>
What I am trying to do is always have two thumbnails divs and only one of the inner-section divs visible at a time and essentially be able to toggle through the inner-section and thumbnail divs when clicking any of the anchors inside the thumbnail div.
How could I achieve this using jquery?
Use this:
http://jsfiddle.net/nHXEs/6/
function displayItem(showItem) {
$('div.thumbnail').show();
$('div.thumbnail .' + showItem).parent().hide();
$('div.inner-section').hide();
$('div.inner-section').filter('.' + showItem).show();
}
$(document).ready(function() {
displayItem('one');
$('div.thumbnail').click(function () {
var showItem = '';
if ($('.media-thumb', $(this)).hasClass('one')) {
showItem = 'one';
} else if ($('.media-thumb', $(this)).hasClass('two')) {
showItem = 'two';
} else {
showItem = 'three';
}
displayItem(showItem);
});
});
Hoply it is what you are looking for.
But i hope so.
It is not the best solution, because you use classes to identify your items, but if you allltimes have exactly 3 thumps and big elements it works.
A better solution will be to uses id`s to identify elements
<div class="thumbnail" id="thump_three">
You haven't explained the logic of how to decide which two thumbnails you want to show but here is a good starting point of what I believe you mean by toggle through which should allow you to expand on it. This would show just one of each element.
The idea is that the JS doesn't need to know about 'one', 'two', 'three' etc and just work for an infinite amount of options.
<p>Anchor text</p>
Give the anchor a reference you can use because finding the classes then working out which will be 'one, 'two', 'three', etc will be a lot more work.
You can do this in a few lines but I've made it obvious what's going on.
$('.thumbnail a').on('click', function(e){
e.preventDefault();
// find the wrapper (.thumbnail) and hide it
var $wrapper=$(this).closest('.thumbnail');
$wrapper.hide();
// find the next one
var $next=$wrapper.next();
// if this was the last one get the first instead
if (!$next.length) $next=$wrapper.siblings().filter(':first');
// show it
$next.show();
// now deal with the element that's elsewhere
var ref=this.href.replace('#','');
$('.inner-section.' + ref).show().siblings().hide();
});
Once you've set this behavior up, to save yourself writing out code again (or needing to define functions) just trigger a click on an anchor in the last element so it makes the first one show.
$('.thumbnail:last a').trigger('click');
Is it possible to design page (or region) in Oracle APEX with 4 buttons like those on APEX main page (after login)?
I tried but I have no idea how to do it.
I tried with custom HTML, using tables and HTML buttons, but HTML buttons are not shown.
Thanks in advance.
It's definitely possible, because the APEX interface itself is built in APEX!
This is part of the page source for the page with the 4 buttons:
<div class="apex-list-horizontal">
<div class="noncurrent">
<div class="image">
<img src="/i/apex/builder/menu-appbuilder-128.gif" width="128" height="128" title="Application Builder" alt="Application Builder" alt="" />
</div>
<div class="label">
Application Builder
</div>
</div>
<div class="noncurrent">
<div class="image">
<img src="/i/apex/builder/menu-sqlws-128.gif" width="128" height="128" title="SQL Workshop" alt="SQL Workshop" alt="" />
</div>
<div class="label">
SQL Workshop
</div>
</div>
<div class="noncurrent">
<div class="image">
<img src="/i/apex/builder/menu-teamdev-128.gif" width="128" height="128" title="Team Development" alt="Team Development" alt="" />
</div>
<div class="label">
Team Development
</div>
</div>
<div class="noncurrent">
<div class="image">
<img src="/i/apex/builder/menu-admin-128.gif" width="128" height="128" title="Administration" alt="Administration" alt="" />
</div>
<div class="label">
Administration
</div>
</div>
</div>
Each button is like this fragment:
<div class="noncurrent">
<div class="image">
<img src="/i/apex/builder/menu-appbuilder-128.gif" width="128" height="128" title="Application Builder" alt="Application Builder" alt="" />
</div>
<div class="label">
Application Builder
</div>
</div>
So you could create a button template that resembles that:
<div class="noncurrent">
<div class="image">
<img src="/myImages/#BUTTON_ATTRIBUTES#" width="128" height="128" title="#LABEL#" alt="#LABEL#" alt="" />
</div>
<div class="label">
#LABEL#
</div>
</div>
In each button you would define the Label, the Link URL and I have assumed you might use "button attributes" to hold the image name.
Another way to achieve this would be to hold your button defintions (label, URL, image location) in a table and create a report like this:
select label, url, image_loc
from mybuttons
where ...;
Now you can build a report template ("row template" style) where each row has the template:
<div class="noncurrent">
<div class="image">
<img src="#IMAGE_LOC#" width="128" height="128" title="#LABEL#" alt="#LABEL#" alt="" />
</div>
<div class="label">
#LABEL#
</div>
</div>
This menu is built with the Shared Components->Navigation->Lists feature.
Check out this documentation: http://docs.oracle.com/cd/E17556_01/doc/user.40/e15517/nav.htm#CHDEEFAB
or this documentation for APEX 3.2: http://docs.oracle.com/cd/E14373_01/appdev.32/e13363/issue_track_ui.htm#BGBIICHF
You can create a List (Shared Components), and use the 'Horizontal Images with Label' template. Upload your images to #WORKSPACE_IMAGES#, and for each list entry, select the appropriate image in the 'Image' field.
If you create a Page 0 and add this list region there, it will appear on every page of your application.