I want to add 2 vote buttons to the left hand side of a jQuery mobile listview. The vote buttons should be centered in the list item, and should be on the left-hand side.
I have sort of gotten this to work using javascript, but what I really want to do is to get this to work without any additional javascript and use the standard jquery mobile data-role attributes and enhancement with pure HTML & CSS.
Here is the HTML markup that I would like to use:
<div data-role="page">
<div data-role="content">
<ul class="has-vote-btns" data-role="listview">
<li>
<a href="#">
<h3>Line Item</h3>
<p>Sub title</p>
</a>
</li>
</ul>
</div>
</div>
Here is the CSS:
.vote-btn {
position: absolute;
top: 50%;
left: 5px;
z-index: 2;
}
.vote-btn .ui-btn-inner {
padding: 0;
}
.like-btn {
margin-top: -30px;
}
.dislike-btn {
margin-top: 0px;
}
.has-vote-btns .ui-link-inherit {
padding-left: 40px !important;
}
.has-vote-btns .ui-li-has-thumb .ui-link-inherit {
padding-left: 118px !important;
}
This does not work (live example).
I was, however, able to get it to work but only by removing the 2 vote buttons in the HTML markup and then adding some javascript to add the buttons dynamically after the listview has already enhanced.
Here the javascript I added to make it work (live example):
$(function(){
$('.has-vote-btns').each(function() {
$(this).find('li').each(function(i, li){
$('').buttonMarkup({
icon: 'arrow-u',
iconpos: 'notext'
}).appendTo(li);
$('').buttonMarkup({
icon: 'arrow-d',
iconpos: 'notext'
}).appendTo(li);
});
});
});
But this second approach of adding the 2 vote buttons after the enhancement is inconvenient. It would be much better if I could do this with plain HTML and CSS rather than hacking in those buttons after the enhancement.
Is there any solution to this that does not use javascript to insert the vote buttons?
I have updated your first fiddle with a CSS only solution:
FIDDLE
It is not the only way to do this, but I believe it solves your issue.
The <ul> HTML is changed as follows:
<ul class="has-vote-btns" data-role="listview" data-split-icon="bars" data-split-theme="d">
<li>
<a href="#">
<h3>Line Item 1</h3>
<p>Sub title 1</p>
</a>
<div class="vote-btns">
</div>
</li>
</ul>
I set the data split icon and theme at the <ul> level (data-split-icon="bars" data-split-theme="d") and in the <li>, I put the voting buttons in their own container so it can be positioned at the left. Here is the CSS that positions the container and the 2 buttons within the container:
.has-vote-btns .ui-link-inherit {
margin-left: 40px !important;
}
.vote-btns {
position: absolute;
top: 0px;
width: 39px;
bottom: 0px;
}
.vote-btns a:first-child {
position: absolute;
bottom: 50%;
margin-bottom: 2px;
}
.vote-btns a:last-child {
position: absolute;
top: 50%;
margin-top: 2px;
}
Of course you don't have to use the :first-child and :last-child pseudo selectors; you could use your like-btn and dislike-btn classes...
Here is an updated FIDDLE for jQM 1.4.x
Related
Example of a post card
I know they use an absolutely positioned link tag one level below the root element and sized it to fill the width and height of the card. But I can't figure out how you can still click on individual links without the full size link blocking it.
<article>
<a id="full sized link"></a>
<div id="actual content">
<h3>
<a id="individual link">TITLE</a>
</h3>
</div>
</article>
Here is roughly how the cards are structured.
I think them may be using JavaScript to redirect you.
Try the anchor tag you want to target to set
<a id="full-sized-link" href='#' ></a>
#full-sized-link{
height: 100%;
position: absolute;
width: 100%;
top: 0;
left: 0;
cursor: pointer;
z-index: 1;
}
article{
position:relative;
}
And on individual links higher z-index
#individual-link{
position: relative;
z-index: 2;
}
I have a jquery gallery which is placed inside of full screen absolutely positioned element and by default that element is hidden with display: none until you click a button and then that element is shown with jquery .show(). The problem is that when I click on a button, that fullscreen element is shown but everything inside that element (jquery gallery) is not visible. Only the fullscreen element is shown. When i remove the display none for the fullscreen element (so its shown on load) the gallery (or the content) is visible. Also in the case when its hidden by default and displays only the fullscreen element and not what is inside of it (gallery) when i resize the browser the gallery is shown?
DEMO: http://codepen.io/riogrande/pen/WxxjvJ
HTML
<div class="gallery">
<div class="demo">
<ul id="lightSlider">
<li data-thumb="static/images/galerija/thumbs/15.jpg">
<img src="static/images/galerija/15.jpg" alt="galerija"/>
</li>
<li data-thumb="static/images/galerija/thumbs/16.jpg">
<img src="static/images/galerija/16.jpg" alt="galerija"/>
</li>
<li data-thumb="static/images/galerija/thumbs/17.jpg">
<img src="static/images/galerija/17.jpg" alt="galerija"/>
</li>
<li data-thumb="static/images/galerija/thumbs/18.jpg">
<img src="static/images/galerija/18.jpg" alt="galerija"/>
</li>
</ul>
</div>
<div class="close-gallery">
<img src="static/images/close.png" alt="close"> Zatvori galeriju
</div>
</div>
CSS
gallery {
position: absolute;
width: 100%;
height: 100%;
background: #2a2d2c;
z-index: 99999;
top: 0;
bottom: 0;
right: 0;
left: 0;
display: none;
.close-gallery {
position: absolute;
right: 5%;
top: 5%;
z-index: 1000;
cursor: pointer;
color: white;
font-size: 1.2rem;
img {
vertical-align: middle;
margin-right: 10px;
}
}
}
JQUERY (THE SLIDER IS LightSlider)
$(document).ready(function () {
$('#lightSlider').lightSlider({
gallery: true,
item: 1,
loop: true,
slideMargin: 0,
thumbItem: 9
});
});
$('.galerija-gumb').click(function () {
$('.gallery').show();
$('body').scrollTop(0);
});
$('.close-gallery').click(function () {
$('.gallery').hide();
var slider = $('#lightslider').lightSlider();
});
So when i click to open a gallery, only the overlay, fullscreen element is displayed
When i resize the gallery is shown??
When i remove the display block from CSS (so the fullscreen is shown all time) the gallery is loaded normally
DEMO: http://codepen.io/riogrande/pen/WxxjvJ
You could do just one overlay <div> and change background, z-index and content of it on click, with toggleClass for example.
I changed your code a bit so here you have working example http://codepen.io/anon/pen/vKKJEq
I am trying to do an overview page on my website so that when I hover over a div on the overview page different sections of that div show different images. Essentially a slideshow but the image changes depending on where the cursor is.
I have managed to find some code that does what I want but it uses an a href to pull in the images which means if you click it, it goes to the link of the image.
Currently I just have placeholder images in but when finished each one will have specific project images in. As each div will just be one project the whole div should go to one html link and not just a specific image link of the image the user is hovering over.
All I want is the user to click and it go to a html link and not an img link.
Here is the code I am using:
The coding savvy people out there will probably have a much better solution for what I would like to achieve, I am interested to see any better solutions.
HTML
<div class="multi">
<ul class="rotator-nav fifth clearfix">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class="imgcontent">
<ul class="rotator-icons fifth">
<span class="img1 active"></span>
<span class="img2"></span>
<span class="img3"></span>
<span class="img4"></span>
<span class="img5"></span>
</ul>
<img src="/img/FoI.jpg" class="currentimg">
</div>
</div>
CSS
.multi {
display: block;
float:left;
position: relative;
width: 30.8%;
height: 20%;
padding: 0px;
margin:0% 1% 2% 1%;
overflow: hidden;
}
.multi .imgcontent {
display: block;
position: absolute;
top: 0px;
}
.imgcontent img {
display:block;
width: 100%;
height: auto;
margin-left: auto;
margin-right: auto;
}
.rotator-nav {
display: block;
position: relative;
width: 100%;
height: 100%;
z-index: 9;
}
.rotator-nav li {
display: block;
float: left;
height: 100%;
}
.rotator-nav.fourth li {
width: 25%;
}
.rotator-nav.fifth li {
width: 20%;
}
.rotator-nav li a {
display: block;
float: left;
width: 100%;
height: 100%;
border-bottom:0px solid #fff
}
.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clearfix { display: inline-block; }
html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }
JS
$(function(){
var $rotators = $('.multi');
var $imglinks = $('.rotator-nav a');
$imglinks.on('mouseenter', function(e){
var imgclass = '.'+$(this).attr('class');
var imglink = $(this).attr('href');
// update main image src
$(this).parent().parent().parent().find('.currentimg').attr('src',imglink);
// update current rotator icon
var $rotators = $(this).parent().parent().parent().find('.rotator-icons');
if($rotators.children(imgclass).hasClass('active')) {
// already active icon -- do nothing
} else {
// remove active class then add to new icon
$rotators.children('span').removeClass('active');
$rotators.children(imgclass).addClass('active');
}
});
});
Any help would be greatly appreciated!
Thanks,
Mark
I think you could best use a data attribute for this instead (if I understand the intention correctly) :
var imglink = $(this).data('image');
<div class="multi">
<ul class="rotator-nav fifth clearfix">
<li>
<a data-image="/img/FoI.jpg" href="#" class="img1"></a>
</li>
<li>
<a data-image="/images/card.jpg" href="#" class="img2"></a>
</li>
<li>
<a data-image="/images/amareal.jpg" href="#" class="img3"></a>
</li>
<li>
<a data-image="/images/edeva.jpg" href="#" class="img4"></a>
</li>
<li>
<a data-image="/images/amacover2.gif" href="#" class="img5"></a>
</li>
</ul>
...
If you'd still like to see the image over the original div, a pseudo element could be used. Advantage there is that they are not actual DOM elements and will not register clicks :
Demo
Now it would be great if the data attribute could be directly used for the content of the pseudo element as well but that doesn't seem possible. And you can't target them with JavaScript so each image would have to be defined with nth-of-type() in the stylesheet additionally.
You don't need to use .parent().parent()
Just use the parent's class to find the item.
Your $(this).parent() * 3 is the $(".multi")
So your $rotators can't find .rotator-icons,
you need to use one more parent or use siblings
And I suggest do not use class if there are no need to do one thing to lots of items.
I am using in-page link anchors to smooth scroll down my page. Everything works just fine and each link hovers to the appropriate image. However, I want the active section to have a different image to show the user where they are. I cant seem to get this to work with anything.
Here is my HTML
<div id="scrollnav">
<ul>
<li class="scrolldot"><span>1</span></li>
<li class="scrolldot"><span>2</span></li>
<li class="scrolldot"><span>3</span></li>
<li class="scrolldot"><span>4</span></li>
<li class="scrolldot"><span>5</span></li>
<li class="scrolldot"><span>6</span></li>
</ul>
</div>
Here is my CSS
#scrollnav { width: 75px; height: 150px; position: fixed; right: 0; top: 100px; z-index: 999999;}
#scrollnav ul li { height: 16px; width: 16px; padding: 0px 0px 7px 0px; }
span { text-indent: -99999px; }
.scrolldot a { display: block; height: 16px; width: 16px; background-image: url(../images/dots.png); background-repeat: no-repeat; background-position: -16px 0; }
.scrolldot a:hover { background-image: url(../images/dots.png); background-repeat: no-repeat; background-position: 0 0; }
.selected { background-color: red; }
This is an example of the section I would scroll to and would want active.
<section id="one">
<div id="mainimagewrapper">
<div class="image1">
<div class="image2">
<div class="970content">
<div id="textdiv">
<h1>This is headline.</h1>
<p>This would be a description if someone wanted to write stuff here. This would be a description if someone wanted to write stuff here. This would be a description if someone wanted to write stuff here.</p>
</div>
</div>
</div>
</div>
</div>
</section>
I think the easiest way to do this, without writing your own jQuery script, is to check out Twitter Bootstrap's "Scrollspy" plugin. I believe it provides the effect you're looking for with very little configuration.
Link: http://twitter.github.com/bootstrap/javascript.html#scrollspy
/* ORDER to define anchor pseudo classes */
a, a:link, a:visited { ... css ...}
a:hover, a:visited:hover {... css ...}
a:active,a.my-active {... css ...}
a:focus {... css ...}
This way you define styling for browser default actions on an anchor.
After that, you might need to trigger some behaviors with javascript (in case the browser misbehaves due to #hash in hyperlink).
Using a jQuery action to add some of your flavour, like .my-active toggled onClick won't help you if you 'reload' the page. You will have to deduce the #hash from the hyperlink, then treat it for your styling.
Simply use jQuery hashchange to get the #hash from hyperlink then trigger a class on your element in scope.
Otherwise, if you just need a plugin to scroll-to some place inside an opened page : http://demos.flesler.com/jquery/scrollTo/ or study jquery-joyride-feature-tour-plugin.
Carry on
http://jsfiddle.net/awfex/4/
HTML:
<div class="section-header section-header-on" id="section_header_289" style="left: 50px;">
<span class="collapse"></span>
<div class="section-name">
<span class="name">Testing Facebox suff</span></div>
<ul class="tools">
<li>
<a class="trash" href="#"></a>
</li>
<li>
</li>
</ul>
<div class="clear"></div>
</div>
js:
$j = jQuery.noConflict();
$j(".section-header").hover(function(){
$j(this).find("ul").show();
});
So, I need this to be relative, because there are multiple "section-header"s and the ID is generally unknown / generated by the app. But, basically, I want to be able to hover over the section-header, and then have ul.tools change from display: none; to display: block. So I figured .show() could do that. but.. I guess my selector is wrong. =\
Your css specifies:
.section-header ul.tools,
.section-content li.content ul.tools {
visibility: hidden;
position: absolute;
top: 0;
left: -40px;
z-index: 1002;
cursor: default;
width: 40px;
height: 35px;
list-style: none;
}
Most notably visibility: hidden; which is not affected by the show()/hide() functions. So you need to change the css visibility property so your list will show-up.
Change:
$j(this).find("ul").show();
To:
$j(this).find("ul").css({visibility: 'visible'});
Or set the CSS to display: none; rather than use the visibility property.
show() documentation: http://api.jquery.com/show/
Demo
just needed a little coercion ;)
$j = jQuery.noConflict();
$j(".section-header").hover(function(){
$j(this).find(".tools").css({visibility:"visible"});
},function(){
$j(this).find(".tools").css({visibility:"hidden"});
});
Just needed a little css.
.tools {
display: none;
}
div.section-header:hover ul {
display: block;
}