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>
Related
I try to extract all links based on these three conditions:
Must be part of <div data-test="cond1">
Must have a <a href="..." class="cond2">
Must not have a <img src="..." class="cond3">
The result should be "/product/1234".
<div data-test="test1">
<div>
<div data-test="cond1">
Link 1
<div class="test4">
<div class="test5">
<div class="test6">
<div class="test7">
<div class="test8">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div data-test="test2">
<div>
<div data-test="cond1">
Link 2
<div class="test4">
<div class="test5">
<div class="test6">
<div class="test7">
<div class="test8">
<img src="bild.jpg" class="cond3">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I'm able to extract the links with the following xpath query.
//div[starts-with(#data-test,"cond")]/a[starts-with(#class,"cond")]/#href
(I know the first part is not really neccessary. But better safe than sorry.)
But I'm still struggling with excluding the links containing an descendant img tag and how to add it to the query above.
This should do what you want:
//div[#data-test="cond1" and not(.//img[#class="cond3"])]
/a[#class="cond2"]
/#href
/product/1234
I have some problems with the construction of my portfolio CV someone who understands HTML, CSS and JavaScript could help you thank you for your help.
My doubts are as follows:
My title of my image gallery has disappeared, how do I make the title "My Portfolio" be like in the 2nd file below?
How do I center my source code so that my image gallery is like in the image below (attached)?
I send the source code. And i appreciate you for your help with source code.
https://codepen.io/Quencyjones79/pen/XWYNwxj
index.html
`
<section class="container" id="portfolio">
<div class="main-title">
<h2>My <span>Portfolio</span><span class="bg-text">My Work</span></h2>
</div>
<p class="port-text">
Here is some of my work that I've done in various programming languages.
</p>
<div class="container_images">
<div class="full-view"></div>
<div class="preview-list">
<ul>
<li>
<input type="radio" id="tab-1" name="gallery-group">
<label for="tab-1">
<div class="tab">
<img
src="img/bandacoldplay.jpeg" />
</div>
</label>
<div class="content">
<img
src="img/bandacoldplay.jpeg" />
</div>
</li>
<li>
<input type="radio" id="tab-2" name="gallery-group">
<label for="tab-2">
<div class="tab">
<img
src="img/mascaraNY.jpg" />
</div>
</label>
<div class="content">
<img
src="img/mascaraNY.jpg" />
</div>
</li>
<li>
<input type="radio" id="tab-3" name="gallery-group">
<label for="tab-3">
<div class="tab">
<img
src="img/Dutchplan.jpg" />
</div>
</label>
<div class="content">
<img
src="img/Dutchplan.jpg" />
</div>
</li>
<li>
<input type="radio" id="tab-4" name="gallery-group" checked>
<label for="tab-4">
<div class="tab">
<img
src="img/planogeralPonteLima.jpg" />
</div>
</label>
<div class="content">
<img src="img/planogeralPonteLima.jpg" />
</div>
</li>
</ul>
</div>
</div>
</section>
`
(continue in codepen)
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.
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>
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.