I am trying to add a hover effect to my object using CSS, but it seems like the html is too complex for it to change. Therefor I ask you for some advice.
The :hover effect is going to change the size and color of the object.
I have tagged jquery and javascript incase it's easier to do the effect in that language.
PHP
<div class="holder forsideikonholder">
<div class="container">
<div class="row">
<ul class="prosess">
<a href="#">
<div class="col-md-4 foto">
<li>
<object data="<?php bloginfo('stylesheet_directory'); ?>/img/ikon-foto.svg" type="image/svg+xml">
<img src="<?php bloginfo('stylesheet_directory'); ?>/img/ikon-foto.png">
</object>
<p class="thin">Fotografering</p>
</li>
</div>
</a>
<a href="#">
<div class="col-md-4 video">
<li>
<object data="<?php bloginfo('stylesheet_directory'); ?>/img/ikon-video.svg" type="image/svg+xml">
<img src="<?php bloginfo('stylesheet_directory'); ?>/img/ikon-video.png">
</object>
<p class="thin">Videoproduksjon</p>
</li>
</div>
</a>
<a href="#">
<div class="col-md-4 web">
<li>
<object data="<?php bloginfo('stylesheet_directory'); ?>/img/ikon-web.svg" type="image/svg+xml">
<img src="<?php bloginfo('stylesheet_directory'); ?>/img/ikon-web.png">
</object>
<p class="thin">Webutvikling</p>
</li>
</div>
</a>
</ul>
</div>
</div>
</div>
CSS
Here is the most important CSS for this question:
.forsideikonholder .prosess {
width: 80%;
margin: auto;
}
.forsideikonholder object {
width: 50%;
}
I have tried to do it like this, but as I mentioned, - it seems like it's to complex and I am not selecting the right object.
.forsideikonholder a:hover {
width: 60%;
}
.forsideikonholder object:hover {
width: 60%;
}
Here is the site: http://goo.gl/kbWlGR
Scroll down till you see the orange part with 3 icons.
A a tag is an inline element and its size can't be modified by default. You have here to transform your a tags into blocks with display: block;. That way you will be able to play with their size (without changing anything in your :hover rule).
Moreover, your markup is wrong: a ul mustn't contain anything else than li tags: move your li tags to make them encapsulate the whole content of your buttons.
.forsideikonholder a {
display:block;
}
Related
I've looked for an answer to this question but I haven't found precisely what I was looking for.
I'm trying to switch divs depending on the size of the screen that my site is displayed on.
At full size (ex. a computer monitor), my div will display a .png file, but when the screen size shrinks to a mobile sized port, I want it to display another div with a series of .png files in a row.
The code currently looks like this if it helps with clarity:
<div class="section" id="section1">
<div class="slide">
<img id="logo" src="img/TestImageA.png">
</div>
<div class="slide">
<img id="logo" src="img/TestImageB.png">
</div>
</div>
<!--
<div class="section" id="section1-mobile">
<div class="slide">
<div class="customer-container-1">
<img id="logo" src="img/PAGE2_Customer_1.png">
</div>
<div class="customer-container-2">
<img id="logo" src="img/PAGE2_Customer_2.png">
</div>
<div class="customer-container-3"">
<img id="logo" src="img/PAGE2_Customer_3.png">
</div>
<div class="customer-container-4">
<img id="logo" src="img/PAGE2_Customer_4.png">
</div>
<div class="customer-container-5">
<img id="logo" src="img/PAGE2_Customer_5.png">
</div>
</div>
<div class="slide">
<div class="inventory-container-1">
<img id="logo" src="img/PAGE2_Inventory_1.png">
</div>
<div class="inventory-container-2">
<img id="logo" src="img/PAGE2_Inventory_2.png">
</div>
<div class="inventory-container-3">
<img id="logo" src="img/PAGE2_Inventory_3.png">
</div>
<div class="inventory-container-4">
<img id="logo" src="img/PAGE2_Inventory_4.png">
</div>
<div class="inventory-container-5">
<img id="logo" src="img/PAGE2_Inventory_5.png">
</div>
</div>
</div>
-->
What you're looking for is known as a media query. There's a basic tutorial on these provided over at W3Schools.
In the following example, I use a width of 700px to invert the display of the DIVs:
#media scren and (max-width: 700px) {
#section1-mobile {
display: block;
}
#section1 {
display: none;
}
}
Mobiles will see #section1-mobile, and regular devices will see #section1.
Note that media queries will take 'priority' sequentially in the DOM, and you can even chain media queries, such as:
#media scren and (max-width: 700px) and (min-width: 600px) { }
This will allow you to target very specific sets of devices; just change the pixel values to suit. In fact, there's even some pre-defined standards that target common devices that you can use to your advantage!
Hope this helps! :)
You should use Bootstrap for this. Also check https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
I'm working on a website on WordPress and the following code is being generated by a WordPress theme several times:
<div style="max-width: 700px; position: absolute; left: 0px; top: 0px;" id="post-394" class=" width2 white all portfolio-post portfolio-thumbnail no-padding">
<figure class="portfolio-thumbnail-container">
<div class="thumbnail-image">
<img src="http://mysiste.com/relaunch/wp-content/uploads/2015/12/hota2xFeaturedImage.jpg" class="attachment-post-thumbnail wp-post-image" alt="hota2xFeaturedImage" height="320" width="700">
</div>
<figcaption class="portfolio-thumbnail-caption portfolio-thumbnail-attachments text-right">
<h5 class="heading heading-underlined portfolio-thumbnail-heading">
My site
</h5>
<ul class="portfolio-category list-inline">
</ul>
</figcaption>
</figure>
</div>
And I need to move the <a> tag on each generated piece of code to "wrap" another section of the code, It should be like this:
<div style="max-width: 700px; position: absolute; left: 0px; top: 0px;" id="post-394" class=" width2 white all portfolio-post portfolio-thumbnail no-padding">
<a href="http://mysiste.com/relaunch/portfolio/mysite/">
<figure class="portfolio-thumbnail-container">
<div class="thumbnail-image">
<img src="http://mysiste.com/relaunch/wp-content/uploads/2015/12/hota2xFeaturedImage.jpg" class="attachment-post-thumbnail wp-post-image" alt="hota2xFeaturedImage" height="320" width="700">
</div>
<figcaption class="portfolio-thumbnail-caption portfolio-thumbnail-attachments text-right">
<h5 class="heading heading-underlined portfolio-thumbnail-heading">
My site
</h5>
<ul class="portfolio-category list-inline">
</ul>
</figcaption>
</figure>
</a>
</div>
Since I can't edit the code because everything is generated by WordPress shortcodes. Is there a way to do it using JavaScript or jQuery for all the generated divs?
There might be cleaner solution, but this will get the job done in jQuery
$(function(){ // is runned after the page loads
$('.portfolio-thumbnail-container').each(function() {
var a = $(this).find('a'); // extract <a/> in a variable
a.parent().html(a.html()); // replace the content of a's parent with a's content
$(this).wrap(a.empty())); // wrap the thumbnail-contailer with the <a> tag, replacing the old content of a with ''
});
});
Note that with this solution all elements with class portofolio-thumbnail-container will be altered and it requires that the 'a' tag is always inside the h5. If your page does not meet these, you may need to change some selectors. If you're having problems with that leave a comment.
demo: https://jsfiddle.net/2gtq7qo9/1/
in javascript without jQuery
[].forEach.call(document.querySelectorAll('div.width2.white.all.portfolio-post.portfolio-thumbnail.no-padding figure figcaption h5 a'), function(a) {
var h5 = a.parentNode;
var figure = h5.parentNode.parentNode;
var div = figure.parentNode;
div.appendChild(a);
h5.textContent = a.textContent;
a.textContent = '';
a.appendChild(figure);
});
div.width2.white.all.portfolio-post.portfolio-thumbnail.no-padding figure figcaption h5 a doesn't have to be so nasty - whittle it down to maybe something like div.portfolio-post a or something like div[id^="post-"] a as per the jQuery answer
You just have to apply that div id
document.getElementById("lnk").href = "https://jsfiddle.net/Parth_Raval/67n70pe2";
This is very easy with jQuery:
$(".portfolio-thumbnail-container").click(function(){
window.location.href = "http://mysiste.com/relaunch/portfolio/mysite/";
});
First things first, here is my example :
https://jsfiddle.net/y532ouzj/33/
HTML:
<div id="image" class="item">
<a ><img src="http://www.topring.com/images/carre_download_cat_ENG.jpg"></a>
</div>
<div id="text" class="show">Text 1</div>
<div id="image" class="item">
<a ><img src="http://www.topring.com/images/carre_download_cat_ENG.jpg"></a>
</div>
<div id="text" class="show">Text 2</div>
<div id="image" class="item">
<a ><img src="http://www.topring.com/images/carre_download_cat_ENG.jpg"></a>
</div>
<div id="text" class="show">Text 3</div>
CSS:
.item {
/* To correctly align image, regardless of content height: */
vertical-align: top;
display: inline-block;
/* To horizontally center images and caption */
text-align: center;
/* The width of the container also implies margin around the images. */
width: 190px;
}
.show {
display: none;
}
.item:hover + .show {
display: block;
}
JAVASCRIPT :
$('#image').hover(function() {
$('#text').show();
}, function() {
$('#text').hide();
});
It almost works but I must be forgetting a little something since my 3 pictures aren't staying where I want them to once I start hovering that mouse. So if you don't hover over the pictures, everything is good, 3 pics aligned. Hover over pic #1 or 2, text goes exactly where I want it, but why does my pic 3 and pic 2 also move down ? Hover over pic #3, everything works the way it should.
You have multiple problems with this. First of all, ids can only be used once. Change them to classes, and you should be fine. Second, move the divs inside of the image div, and it will only show the one that you would like to. Updated javascript and html follows:
fiddle: https://jsfiddle.net/y532ouzj/34/
HTML
<div class="image item">
<a><img src="http://www.topring.com/images/carre_download_cat_ENG.jpg"></a>
<div class="text show">Text 1</div>
</div>
<div class="image item">
<a><img src="http://www.topring.com/images/carre_download_cat_ENG.jpg"></a>
<div class="text show">Text 2</div>
</div>
<div class=" image item">
<a><img src="http://www.topring.com/images/carre_download_cat_ENG.jpg"></a>
<div class="text show">Text 3</div>
</div>
Javascript
$('.image').hover(function () {
var that = $(this);
that.find('.text').show();
}, function () {
var that = $(this);
that.find('.text').hide();
});
First of all, java and javascript aren't the same thing; they're two separate languages.
Second, in HTML, it's bad form (and possibly dead wrong) to use the same id for multiple elements on a page. the value of each id attribute should be unique.
Finally, the answer in HTML and jQuery:
https://jsfiddle.net/y532ouzj/36/
The HTML now contains just one text. It will be modified for each case
<div id="image_1" class="item">
<a >
<img src="http://www.topring.com/images/carre_download_cat_ENG.jpg" /> </a>
</div>
<div id="image_2" class="item">
<a >
<img src="http://www.topring.com/images/carre_download_cat_ENG.jpg" />
</a>
</div>
<div id="image_3" class="item">
<a >
<img src="http://www.topring.com/images/carre_download_cat_ENG.jpg" />
</a>
</div>
<div id="text" class="show">
Text
</div>
The javascript now modifies and reveals the text based on whichever image triggers the event.
$('#image_1').hover(function() {
$('#text').html("Text 1");
$('#text').show();
}, function() {
$('#text').hide();
});
$('#image_2').hover(function() {
$('#text').html("Text 2");
$('#text').show();
}, function() {
$('#text').hide();
});
$('#image_3').hover(function() {
$('#text').html("Text 3");
$('#text').show();
}, function() {
$('#text').hide();
});
I'm going to make a suggestion instead of answering the direct question. Instead of overcomplicating this, I suggest you used the Title attribute.
<div class="image"><a><img src="" title="Text 1" /></a></div>
Most browsers will know what to do with this. Some older browsers may give varying quality of interpreting the attribute, but this is the easiest way to do what you are trying to accomplish.
I use Fancybox and Scrolling Carousel.
Try to make : click $(.subject) into Fancybox > show $(.content) > $(.content) scroll use scrollingCarousel.
I did test works fine separate.
But if I put them together (Demo1).
Why the $(.content) won't load scrollingCarousel?
(but if reload $(.content) page, then scrollingCarousel work.)
So I try to wrote in Fancybox callback (Demo2) afterLoad,beforeLoad,beforeShow... I did test too, still does't work.
(I've test other carousel plugin, same problem.)
Demo 1 jsfiddle
$(".subject").fancybox({});
$('.content').scrollingCarousel({});
Demo 2
$(".subject").fancybox({
afterLoad: function(){
$('.content').scrollingCarousel({});
}
});
HTML:
<div class="subject">
<div>
<a class="subjectlist"rel="1" href="#1">
<img class="" src="http://farm7.staticflickr.com/6106/6347065961_bb73745e70_m.jpg">
</a>
</div>
</div>
<div class="content" id="1">
<div><img class="" src="http://farm8.staticflickr.com/7171/6417719753_374653e28c_b.jpg"></div>
<div><img class="" src="http://farm7.staticflickr.com/6106/6347065961_bb73745e70_b.jpg"></div>
<div><img class="" src="http://farm7.staticflickr.com/6106/6347065961_bb73745e70_m.jpg"></div>
</div>
CSS
.content{
display:none;
width: 200px;
height: 200px;
}
.content img{
width: 200px;
height: 200px;
}
Any advice or help would be greatly appreciated.
.content is hidden by your CSS with display: none, so you simply have to show it using .show() before invoking the scroller, otherwise it just stays hidden.
http://jsfiddle.net/6VH7w/3/
$(".subjectlist").fancybox({
afterLoad: function() {
$('.content').show().scrollingCarousel({
scrollerAlignment: 'vertical'
});
}
});
Hellow I made owl carousel 2 and fancybox, added fancybox css, mousewheel and js files. Then I made my items
<div class="owl-carousel owl-theme">
<div class="item">
<a class="fancybox" group="fancybox" href="imagen0.png"><img class="img-responsive img-thumbnail center-block" src="imagen0.png" title="SEJ" /></a>
</div>
<div class="item">
<a class="fancybox" group="fancybox" href="imagen1.png"><img class="img-responsive img-thumbnail center-block" src="imagen1.png" title="titulos_imagen" /></a>
</div>
</div>
I hope this help you.
I am using JCarouselLite to produce three scroll boxes on a website. 2 of the carousels line up properly (New, Gifts), but a third does not (BestSellers).
The image floats to the left because the plugin keeps calculating the width incorrectly. All three have the same underlying HTML code, but I can't get the BestSeller Carousel to line up properly.
I also tried to run it on window.load. and have init running in the footer.
What am I missing?
Update:
Here's the Code that initalizes the Carousel:
jQuery(document).ready(function($){
$(".rotateNewContent").jCarouselLite({
btnNext: ".next", btnPrev: ".prev",
speed: 800, visible: 1
});
$(".rotateBestsellerContent").jCarouselLite({
btnNext: ".nextBest", btnPrev:
".prevBest", speed: 800, visible: 1
});
$(".rotateGiftContent").jCarouselLite({
btnNext: ".nextGift", btnPrev:
".prevGift", speed: 800, visible: 1
});
});
here is the html of the first and second lists.
<button class="prev"></button>
<div class="rotateWrapper"><div class="rotateNewContent">
<ul class="NewProductList">
<li class="Odd">
<div class="ProductImage">
<a href="#" ><img src="#" alt="" /></a>
</div>
<div class="ProductDetails">
<strong>
Organic Maple Syrup from Mount Cabot
</strong>
</div>
<div class="ProductPriceRating">
<em>$13.00</em>
</div>
</li>
<li class="Even">
<div class="ProductImage">
<a href="#" ><img src="#" alt="" /></a>
</div>
<div class="ProductDetails">
<strong>
<a href="#">Sicilian Marmalades from Marchesi di San
Giuliano</a>
</strong>
</div>
<div class="ProductPriceRating">
<em>$15.00</em>
</div>
</li>
</ul>
</div></div><button class="next"></button>
<button class="prevBest"></button>
<div class="rotateWrapper"><div class="rotateBestsellerContent">
<ul class="NewProductList">
<li>
<div class="ProductImage"><a href="#" alt="" /></a>
</div>
<div class="ProductDetails">
<strong>Farro from Rustichella d'Abruzzo</strong>
<em>$8.75</em>
</div>
</li>
<li>
<div class="ProductImage">
<a href="#" alt="" /></a>
</div>
<div class="ProductDetails">
<strong>Mariage Frères Marco Polo</strong>
<em>$22.00</em>
</div>
</li>
</ul>
NB: This site is not yet live, please do not shop.
The middle instance has a width of 135px, while the left and right instances have a width of 180px.
Left Content:
<div class="rotateNewContent" style="overflow: hidden; visibility: visible; position:
relative; z-index: 2; left: 0px; width: 180px;">
Middle Content:
<div class="rotateBestsellerContent" style="overflow: hidden; visibility: visible;
position: relative; z-index: 2; left: 0px; width: 135px;">
I used Firebug to diagnose the CSS issues.
i narrowed it down to the product names. i believe it has something to do with the foreign characters in the names. when i take those products out, the layout resolves correctly.
--now i have to figure out how to fix that. :-)
the problem was that there were two divs within the li element. i wrapped both within another div and gave it a set width and height. now the plugin uses that div to calculate its size.
thanks for helping me think this through george!