I'm trying to use php DOM to grab the src of the images within a "thumbnailCarousel" div in an html. but somehow the loadHTML doesn't contain this element. Does it have something to do with the javascript function in the html? Any suggestions or workarounds is appreciated. Thanks!
sample html:
http://www.crocs.com.sg/crocs-womens-cap-top-flat/12300,en_SG,pd.html?cid=6Z1&cgid=women-footwear-mary-janes-and-flats&intid=home14_carousel_product
div:
<div class="thumbnailCarousel" data-jcarousel="true"><ul style="left: 0px; top: 0px;">
<ul style="left: 0px; top: 0px;">
<li>
<img src="http://images.crocs.com/is/image/Crocs/12300_6Z1_ALT100?&fmt=jpeg&qlt=85,1&op_sharpen=0&resMode=sharp2&op_usm=1,1,6,0&iccEmbed=0&printRes=72&wid=60&hei=72" alt="100">
</li>
<li>
<img src="http://images.crocs.com/is/image/Crocs/12300_6Z1_ALT100?&fmt=jpeg&qlt=85,1&op_sharpen=0&resMode=sharp2&op_usm=1,1,6,0&iccEmbed=0&printRes=72&wid=60&hei=72" alt="100">
</li>
</ul>
</div>
The first thing that pops out is the markup posted in the question is invalid, missing a </ul>.
Related
I am trying a really easy thing, hiding / showing an info div my mouse-hovering another element. My code structure is similar to:
<div class="divRow">
<div class="divColumn">
<div class="divInfo">Info</div><img src="" /></div>
<div class="divInfo">Info</div><img src="" /></div>
<div class="divInfo">Info</div><img src="" /></div>
</div>
</div>
Image is shown, and there should be a blank space in which I want divInfo to appear.
I am using the following jQuery code to show / hide:
$(function() {
$('.divInfo').hide();
$('.divColumn').hover( function() { $('.divInfo').toggle(); } );
});
Of course, this works, but shows / hides all 3 divs in the row at a time. I want to be able to show hide each one separately...
Is this possible using classes? Or do I have to use a different unique ID for each??
Functionality I want is shown here, but I don't know how to do that. :)
http://www.therice-co.com
Regards and thanks
Actually you want the divs to always be there but somehow "not visible" when you are not hovering them. This is as simple as:
.divInfo:not(:hover){
opacity: 0;
}
Fiddle
This is what are you trying to achieve
see http://jsfiddle.net/j0aoy47L/
Javascript
<script>
$(function() {
$('.divInfo').hover( function() {
$(this).find('.info').toggle();
} );
});
</script>
CSS
<style>
.info{
display: none;
text-align: left;
}
.divInfo{
background: #fcfcfc;
border:1px solid #e5e5e5;
width:360px;
height:200px;
position: relative;
margin-bottom: 10px;
text-align: center;
padding:10px;
}
.divInfo img{
position: absolute;
bottom: 9px;
left: 19px;
}
</style>
HTML
<div class="divRow">
<div class="divColumn">
<div class="divInfo">
<div class="info"><h4>Image Caption</h4> <p>Some image information</p></div>
<img src="http://placehold.it/350x100/addd" />
</div>
<div class="divInfo">
<div class="info"><h4>Image Caption</h4> <p>Some image information</p></div>
<img src="http://placehold.it/350x100/addd" />
</div>
<div class="divInfo">
<div class="info"><h4>Image Caption</h4> <p>Some image information</p></div>
<img src="http://placehold.it/350x100/addd" />
</div>
</div>
$('.divColumn').children('a').hover(function () { // bind it to exact image
$(this).prev('.divInfo').toggle(); // show previous div
});
will work
jQuery DEMO
but you definetely have too much closing </div>s
also you can do it with pure CSS if you wrap each info and image in separate div and use :hover on it
PURE CSS DEMO
<p style="" class="remove-item">
<a href="<?php
echo $this->getUrl('checkout/cart/delete', array('id' => $item->getId(), Mage_Core_Controller_Front_Action::PARAM_NAME_URL_ENCODED => $this->helper('core/url')->getEncodedUrl())); ?>" style="font-size: 8.5px; float: right; margin-right: 6px; color: #cc0909; font-weight: bold"><?php echo $this->__(''); ?>
Remove item
<a class="remove-item-red" style="float: right; margin-right: 2px; margin-top: 2px"></a>
</a>
</p>
I was wondering how to get an img and the text that states Remove button to link to the same place. The img is the <a class="remove-item-red">, a red circle with an x in the middle. So both the img and the text need to serve the same function but whenever I meddle with the a class for my btn, it tends to crash or the usual that the button itself does not serve the function while the text does.
I had Remove item as <?php echo $this->__('Remove item'); ?> before which still resulted in the same, with Remove item doing its function while the a class button does nothing. It's just an image.
What am I doing wrong and how do I fix it?
Try using a div-tag for the Remove button instead of embedding an a-tag in another a-tag.
Like so:
<p style="" class="remove-item">
<a href="#">
Remove item
<div class="remove-item-red"></div>
</a>
</p>
My question is how can I create expandable panels in an HTML form without using javascript, so that when a user clicks on each panel it expands and displays the form.
Before click:
<ul>
<li id="panel1"><a></a><div class="content"></div></li>
<li id="panel2"><a></a><div class="content"></div></li>
<li id="panel3"><a></a><div class="content"></div></li>
</ul>
After click:
<ul>
<li id="panel1">
<a></a>
<div class="content">
<form id="FORM"> ..... </form>
</div>
</li>
<li id="panel2"><a></a><div class="content"></div></li>
<li id="panel3"><a></a><div class="content"></div></li>
</ul>
You can do that using :target css pseudo selector - it is not very elegant though, as clicking on the anchor tag modifies the url so it is hard to toggle the form. Best use javascript.
<style>
form {
display: none;
}
form:target {
display: block;
background: red;
}
</style>
<ul>
<li id="panel1" ><div class="content">Show form<form id="form" > My form <input type="text"></form></div></li>
<li id="panel2"><div class="content">My content</div></li>
<li id="panel3"><div class="content">My content</div></li>
</ul>
some examples of :target in action:
http://css-tricks.com/css-target-for-off-screen-designs/ and http://css-tricks.com/on-target/
Without using ANY javascript at all, you can't.
Unless you just put links and redirect your users to a page with the expanded content every time.
Or unless you write some kind of complex CSS using the :hover pseudo-selector and not the click event.
CSS 3 has a :target pseudo-selector that might help. Here is an example: https://tinker.io/1756b
How to convert this :
<ul class="ulStyle">
<li class="liStyle">
<div class="first">
<div class="second">
menu1
</div>
</div>
</li>
</ul>
to wp_nav_menu
Too many div and class inside there, anyone can help me solve this problem?Thank you!
This can be accomplished using the nth-child() selector in css
see the codepen here
use this css:
.wp_nav_menu div:nth-child(1) {
background: blue;
}
.wp_nav_menu div:nth-child(2) {
background: red;
}
with the following markup:
<ul class="wp_nav_menu">
<li>
<div>
Foo
</div>
<div>
Bar
</div>
</li>
</ul>
As I see you are using a custom theme that have probably a Walker. In WordPress you can use a Walker to modify the HTML rendered by wp_nav_menu.
http://codex.wordpress.org/Function_Reference/Walker_Class
First, see if there is one, normally in theme/functions.php
Before starting with custom walkers, use the options before, after, link_before, link_after and items_wrap. See http://codex.wordpress.org/Function_Reference/wp_nav_menu
It will allow you to change the encapsulation of your menu items.
I'm fetching data through CURL request and while parsing the HTML I'm some spans having attributes are not being parsed neatly.
Snippet of HTML code
<div class="ftlt" style="width:250px;">
<div class="tdiv"><span class="prop_price_img"></span><span class="property_price">PROPERTY_PRICE</span></div>
<p class="adPrice">AREA</p>
<h4>
<p style="float:left;width:251px;font-family:Arial, Helvetica, sans-serif;font-size:13px;padding:2px 10px 10px 0px;">TITLE,
<span style="color:#666;"> CITY_NAME.</span>
<a title="title, Sale" style="color:#3266CC;font-size:12px;text-decoration:underline;">View on map</a></p>
</h4>
<p style="font-weight:bold;color:#666;">
Premium
</p>
<div class="clr"></div>
</div>
I have to access the CITY_NAME element neatly.
I have been able to fetch that node through HTML DOM as
$spans = $html->find(div.ftlt span);
$city_value=strip_tags($spans[2]);
This $city_value is getting morphed.
I've tried removeAttribute method.Maybe I'm not doing it properly.
If regex can be applied, I want to know how?
$spans = $html->find(div.ftlt span);
$city_value=$spans[2]->nodeValue;
Why don't you use nodeValue?