I have retrieve buttons dynamically, i want to add border-bottom css style to button which is tapped. But it is applicable to all button.
How can I solve this Issue??
I want to keep ALL tab as default selected.enter image description here
enter image description here
all(){
alert('all');
this.isAllActive = true;
this.isActive = false;
this.TabGender = null;
this.TabCategory = null;
this.TabSub_Category = null;
},
selectTab: function (gender, category, sub_category,args) {
alert(args);
this.TabGender = gender;
this.TabCategory = category;
this.TabSub_Category = sub_category;
alert(this.TabGender+this.TabCategory+this.TabSub_Category);
this.isActive = true;
this.isAllActive = false;
//this.makeTabActive(args);
}
.category_label {
height: 35;
vertical-align: middle;
padding: 5 15;
margin: 0 4;
background-color: #344955;
color: #FFFFFF;
border-radius: 5;
font-size: 16;
}
.active {
border-width: 0 0 4 0;
border-color: #F9AA33;
}
<StackLayout orientation="horizontal" style="padding-left:5">
<Button text="ALL" class="category_label" :class="{active:isAllActive}" #tap="all"/>
<template v-for="(tab,index) in tabs" marginBottom="5">
<Button :text="tab.gender.charAt(0).toUpperCase(0)+'-'+tab.sub_category" :key="index" class="category_label"
:class="{active:isActive}" #tap="selectTab(tab.gender,tab.category,tab.sub_category,index)" />
</template>
</StackLayout>
Just use the border-bottom-color and border-bottom-width, that should work.
Example
.active {
border-bottom-color: yellow;
border-bottom-width: 2;
}
Playground Sample
Related
I'm restyling my cross-platform app made with NativeScript + Angular and I want to change the border color of a textfield when I'm putting data on it.
I've tried this but it doesn't work
TextField {
margin-bottom: 10;
border-radius: 4;
background: #FFFFFF;
border-width: 0.5;
border-color: #C4C4C4;
box-sizing: border-box;
}
TextField:focus{
border-color: red;
}
This is a part of login.component.html:
<label text="Email"></label>
<TextField
hint="mario.rossi#gmail.com"
keyboardType="email"
autocorrect="false"
autocapitalizationType="none"
[(ngModel)]="user.email"
class="input"></TextField>
<label text="Password"></label>
<TextField
hint="Password"
secure="true"
[(ngModel)]="user.password"
class="input"></TextField>
How can I do?
Here is the Playground
NativeScript doesn't support any pseudo-selector while text field is focused. But you could simply listen to focus and blur events, add / remove a class for changing border color.
Since you are using Angular, a simple directive could solve this problem once in for all TextFields in your app.
HTML
<ScrollView class="page">
<StackLayout class="form">
<TextField appHighlightBorder class="m-10 input input-border"
hint="First Name"></TextField>
<TextField appHighlightBorder class="m-b-10 m-x-10 input input-border"
hint="Last Name"></TextField>
<TextField appHighlightBorder class="m-b-10 m-x-10 input input-border"
hint="Email"></TextField>
</StackLayout>
</ScrollView>
CSS
.form .input-border.focus {
border-color: red;
}
Directive
import { Directive, ElementRef, OnDestroy, Renderer2 } from '#angular/core';
import { TextField } from 'tns-core-modules/ui/text-field';
#Directive({
selector: '[appHighlightBorder]'
})
export class HighlightDirective implements OnDestroy {
private removeFocusEvent: () => void;
private removeBlurEvent: () => void;
constructor(private elementRef: ElementRef, private renderer: Renderer2) {
this.removeFocusEvent = this.renderer.listen(elementRef.nativeElement, TextField.focusEvent, () => {
renderer.addClass(elementRef.nativeElement, 'focus');
});
this.removeBlurEvent = this.renderer.listen(elementRef.nativeElement, TextField.blurEvent, () => {
renderer.removeClass(elementRef.nativeElement, 'focus');
});
}
ngOnDestroy() {
this.removeFocusEvent();
this.removeBlurEvent();
}
}
Playground Sample
Now you can use the focus event from css and change the border color.
if this is your TextField:
<TextField class="input"></TextField>
the css rule will be:
.input:focus{
border-color: blue;
}
Unfortunately, it is not there by default. However, you could implement it by yourself with focus and blur events.
For example:
<some-page>.xml
...
<TextField class="input-field"
text="{{ email }}"
keyboardType="email"
autocapitalizationType="none"
autocorrect="false"
focus="onTextFieldFocus"
blur="onTextFieldBlur" />
...
<some-page>.ts
...
const focusedPseudoClass = "focused";
export function onTextFieldFocus(args: EventData) {
const textField = <TextField>args.object;
textField.addPseudoClass(focusedPseudoClass);
}
export function onTextFieldBlur(args: EventData) {
const textField = <TextField>args.object;
textField.deletePseudoClass(focusedPseudoClass);
}
...
<some-page>.css
...
.input-field {
border-bottom-color: gray;
border-bottom-width: 1;
}
.input-field:focused {
border-bottom-color: red;
}
...
textarea {
margin-bottom: 10;
border-radius: 4;
background: #FFFFFF;
outline:0;
border-width: 0.5;
border-color: #C4C4C4;
box-sizing: border-box;
}
textarea:focus{
border-color: red;
}
<textarea></textarea>
just removed outline from textarea!
Add this to your css file. Hope it works.
TextField:focus {
outline: none !important;
border-color: red;
}
I have a modal image that when clicked, will open full-screen with the text displayed from the alt tag in the image. I grabbed the code off another site so need to change it to add a download link within the modal so when the link is clicked it will download a file. Is this possible in the below code?
Code below:
<img id="myImg1" src="test.png" alt="Hello" width="95" height="146">
<!-- The Modal -->
<script
<div id="myModal1" class="modal">
<span class="close">x</span>
<img class="modal-content" id="img01">
<div id="caption">
<div id="caption1"></div>
</div>
</div>
<script>
// Get the modal
var modal = document.getElementById('myModal1');
// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById('myImg1');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption1");
img.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
Any assistance would be much appreciated.
[![<!DOCTYPE html>
<html>
<head>
<style>
#myImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
#myImg:hover {opacity: 0.7;}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}
/* Modal Content (image) */
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
/* Caption of Modal Image */
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
/* Add Animation */
.modal-content, #caption {
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.6s;
animation-name: zoom;
animation-duration: 0.6s;
}
#-webkit-keyframes zoom {
from {-webkit-transform:scale(0)}
to {-webkit-transform:scale(1)}
}
#keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}
/* The Close Button */
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
/* 100% Image Width on Smaller Screens */
#media only screen and (max-width: 700px){
.modal-content {
width: 100%;
}
}
</style>
</head>
<body>
<h2>Image Modal</h2>
<p>In this example, we use CSS to create a modal (dialog box) that is hidden by default.</p>
<p>We use JavaScript to trigger the modal and to display the current image inside the modal when it is clicked on. Also note that we use the value from the image's "alt" attribute as an image caption text inside the modal.</p>
<img id="myImg" src="img_fjords.jpg" alt="Trolltunga, Norway" width="300" height="200">
<!-- The Modal -->
<div id="myModal" class="modal">
Download
<span class="close">×</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>
<script>
// Get the modal
var modal = document.getElementById('myModal');
// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById('myImg');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")\[0\];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
</script>
</body>
</html>
I'm trying to create a parallax effect whereby an absolutely positioned child element should move at a rate slower than it's parent on scroll.
The child will always be 130% height of the parent but the parent can be any height:
HTML:
<div class="parallax-window lg">
<div class="parallax-image image-1"></div>
<div class="parallax-content">Hello World</div>
</div>
<div class="parallax-window">
<div class="parallax-image image-2"></div>
<div class="parallax-content">Hello World</div>
</div>
CSS:
.parallax-window {
min-height: 300px;
position: relative;
overflow: hidden;
}
.parallax-window.lg {
min-height: 600px;
}
.parallax-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 130%;
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
transform: translate3d(0, 0, 0);
z-index: -1;
}
.image-1 {
background-image: url(https://i.ytimg.com/vi/TbC-vUPMR7k/maxresdefault.jpg);
}
.image-2 {
background-image: url(https://i.ytimg.com/vi/xi5-YrAEChc/maxresdefault.jpg);
}
I have a formula to move the image but my maths is clearly way off:
var win = $(window),
win_h = win.height(),
parallaxers = $('.parallax-window');
function scroll_events() {
var win_top = win.scrollTop(),
win_btm = win_top + win_h;
parallaxers.each(function() {
var cont = $(this),
cont_top = cont.offset().top,
cont_h = cont.height(),
cont_btm = cont_top + cont_h,
para = cont.find('.parallax-image'),
para_h = Math.round(cont_h * 1.3);
if (cont_btm > win_top && cont_top <= win_btm) {
var diff = (win_h - cont_h) / (win_h - para_h),
value = -Math.round((win_top * diff));
// para.css('transform', 'translate3d(0,' + value*-1 + 'px, 0)');
para.css('top', value + 'px');
}
});
}
The images move but not at the correct rate.
The image should be in line with the top of the parent when the element first comes into the viewport. Then after scrolling, the bottom of the image should be in line with the bottom of the parent when it reaches the top of the viewport.
Any help would be massively appreciated!
FIDDLE (https://jsfiddle.net/8dwLwgy7/1/)
I figured this out.
For anyone stumbling on this in the future - the trick was to replace the window scrolled value with the remainder of the window scrolled amount minus the element's offset top, minus the height of the element.
Then calculate the speed by dividing the difference between the container height and the element height with largest of either the window and the container:
// Wrong:
// value = -Math.round((win_top * diff));
// Right:
var diff = elem_h - cont_h,
max = Math.max(cont_h, win_h),
speed = diff / max,
cont_scrolled = win_top - cont_top - cont_h,
value = Math.round(cont_scrolled * speed);
para.css('top', value + 'px');
Full working code:
(function() {
var lastTime = 0;
var vendors = ['ms', 'moz', 'webkit', 'o'];
for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] || window[vendors[x] + 'CancelRequestAnimationFrame'];
}
if (!window.requestAnimationFrame)
window.requestAnimationFrame = function(callback, element) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
var id = window.setTimeout(function() {
callback(currTime + timeToCall);
},
timeToCall);
lastTime = currTime + timeToCall;
return id;
};
if (!window.cancelAnimationFrame)
window.cancelAnimationFrame = function(id) {
clearTimeout(id);
};
}());
(function($) {
var win = $(window),
win_h = win.height();
parallaxers = $('.parallax-window'),
parallax_objs = [],
scroll_busy = false;
function init_parallax() {
win_h = win.height();
parallax_objs = [];
parallaxers.each(function() {
var cont = $(this),
elem = cont.find('.parallax-image'),
cont_top = cont.offset().top,
cont_h = cont.height(),
elem_h = Math.round(cont_h * 1.3),
diff = elem_h - cont_h,
max = Math.max(cont_h, win_h),
speed = diff / max,
parallaxer = {
cont_top: cont_top,
cont_h: cont_h,
elem: elem,
speed: speed
};
parallax_objs.push(parallaxer);
});
}
function on_scroll() {
if (!scroll_busy) {
scroll_busy = true;
window.requestAnimationFrame(init_scroll);
}
}
function init_scroll() {
scroll_events()
scroll_busy = false;
}
function scroll_events() {
var win_top = win.scrollTop(),
win_btm = win_top + win_h;
$.each(parallax_objs, function(i, para) {
cont_btm = para.cont_top + para.cont_h;
if( cont_btm > win_top && para.cont_top <= win_btm ) {
var cont_scrolled = win_top - para.cont_top - para.cont_h,
value = Math.round(cont_scrolled * para.speed);
para.elem.css('top', value + 'px');
}
});
}
$(document).ready(function() {
init_parallax();
win.resize(init_parallax);
scroll_events();
win.scroll(on_scroll);
});
})(jQuery);
.parallax-window {
min-height: 300px;
position: relative;
overflow: hidden;
}
.parallax-window.lg {
min-height: 600px;
}
.parallax-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 130%;
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
transform: translate3d(0, 0, 0);
z-index: -1;
}
.image-1 {
background-image: url(https://i.ytimg.com/vi/TbC-vUPMR7k/maxresdefault.jpg);
}
.image-2 {
background-image: url(https://i.ytimg.com/vi/xi5-YrAEChc/maxresdefault.jpg);
}
.parallax-content {
position: absolute;
top: 50%;
left: 0;
width: 100%;
text-align: center;
font-family: arial, sans-serif;
font-size: 60px;
color: #fff;
transform: translateY(-50%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="parallax-window lg">
<div class="parallax-image image-1"></div>
<div class="parallax-content">Hello World</div>
</div>
<div class="parallax-window">
<div class="parallax-image image-2"></div>
<div class="parallax-content">Hello World</div>
</div>
<div class="parallax-window lg">
<div class="parallax-image image-1"></div>
<div class="parallax-content">Hello World</div>
</div>
<div class="parallax-window">
<div class="parallax-image image-2"></div>
<div class="parallax-content">Hello World</div>
</div>
<div class="parallax-window lg">
<div class="parallax-image image-1"></div>
<div class="parallax-content">Hello World</div>
</div>
Updated Fiddle: https://jsfiddle.net/8dwLwgy7/2/
I'm using Magnific popup to display an upload form where the user can select multiple images to upload and preview them before submitting the form, I let the user preview the images plus add a from inputs underneath the image when he clicks on it to enter the caption and alt for it, here's the code that I have ...
(function() {
if ($("a.uploadMediaImageForm").length) {
$("a.uploadMediaImageForm").magnificPopup({
type: 'inline',
preloader: false,
closeOnBgClick: false,
enableEscapeKey: false,
focus: '#name',
removalDelay: 500, //delay removal by X to allow out-animation
// When elemened is focused, some mobile browsers in some cases zoom in
// It looks not nice, so we disable it:
callbacks: {
beforeOpen: function() {
if ($(window).width() < 700) {
this.st.focus = false;
} else {
this.st.focus = '#name';
}
this.st.mainClass = this.st.el.attr('data-effect');
},
open: function() {
if ($("input#imageUpload").length) {
$("input#imageUpload").on('change', function() {
//Get count of selected files
var countFiles = $(this)[0].files.length;
var imgPath = $(this)[0].value;
var extension = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase();
var previewHolder = $("ul.imagePreview");
previewHolder.empty();
if (extension == "gif" || extension == "png" || extension == "jpg" || extension == "jpeg") {
if (typeof(FileReader) != "undefined") {
//loop for each file selected for uploaded.
for (var i = 0; i < countFiles; i++) {
var reader = new FileReader();
reader.onload = function(e) {
$("<li><img src='" + e.target.result +"'></li>").appendTo(previewHolder);
}
previewHolder.show();
reader.readAsDataURL($(this)[0].files[i]);
}
} else {
alert("This browser does not support FileReader.");
}
} else {
alert("Please select only images");
}
});
} //Image upload preview
if($("ul.imagePreview").length) {
$("ul.imagePreview").on("click", "li", function(event) {
if($(this).hasClass("selected")) {
$(this).removeClass("selected");
$(this).find("div").remove();
} else {
$(this).addClass("selected");
$(this).append("<div><label><span>Image Alt</span><input type='text'></label><label><span>Image Caption</span><input type='text'></label></div>");
}
});
$("ul.imagePreview").on("click", "div", function(event) {
event.stopPropagation();
});
}//add form when clicked on an image
},
beforeClose: function() {
// $("ul.imagePreview").empty();
var countFiles = "";
var imgPath = "";
var extension = "";
var previewHolder = $("ul.imagePreview");
previewHolder.empty();
}
},
midClick: true // allow opening popup on middle mouse click. Always set
});
}
})(); //popup Forms and Uploads
div.uploadPopup {
width: 80%;
margin: auto;
background: white;
position: relative;
padding: 40px;
}
label {
width: 100%;
margin-bottom: 20px;
clear: both;
}
ul.imagePreview {
width: 100%;
clear: both;
display: block;
}
ul.imagePreview li {
width: 100%;
display: block;
margin-bottom: 20px;
max-height: 150px;
cursor: pointer;
}
ul.imagePreview li.selected {
max-height: auto;
}
ul.imagePreview li img {
max-height: 150px;
display: block;
margin: auto;
}
<link href="https://cdn.jsdelivr.net/jquery.magnific-popup/1.0.0/magnific-popup.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.0.1/jquery.magnific-popup.min.js"></script>
Upload Media
<div id="uploadMediaImageForm" class="uploadPopup mfp-with-anim mfp-hide">
<form action="#">
<label class="upload">
<span>Upload Images</span>
<input id="imageUpload" type="file" multiple>
</label>
<ul class="imagePreview">
</ul>
</form>
</div>
Now everything works fine the first time, but when I close the popup and re-open it again, something wrong happens in the image previewer, it duplicates the images I choose and sometimes doesn't even show the image if it were the last image I choose before closing.
I tried to set all the variables before closing the popup and clear the image preview ul element, but that didn't help.
I need your help guys, what am I doing wrong here?
EDIT
I gave the form itself an id of "fileForm" and tried to reset the whole form and empty the ul.imagePreview before closing the popup with this code ...
$("#fileForm")[0].reset();
$("ul.imagePreview").empty();
But still no luck, it still duplicated any image I upload the second time after closing the popup and opening it again !!
need help here.
You are binding more and more listeners to the same event:
Your form always exists in your document even when the popup is closed, you just hide it most of the time (using the class mfp-hide).
Each time you open the popup, the callback "open" is called, which bind a function to the change event of your input, and this callback do the preview stuff.
But if you open the popup twice, it will bind again the same function to the same event on the same input. That's why you have duplicate: the code is called twice.
Move all your binding outside your callback so that they will be done once:
(function() {
if ($("input#imageUpload").length) {
$("input#imageUpload").on('change', function() {
//Get count of selected files
var countFiles = $(this)[0].files.length;
var imgPath = $(this)[0].value;
var extension = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase();
var previewHolder = $("ul.imagePreview");
previewHolder.empty();
if (extension == "gif" || extension == "png" || extension == "jpg" || extension == "jpeg") {
if (typeof(FileReader) != "undefined") {
//loop for each file selected for uploaded.
for (var i = 0; i < countFiles; i++) {
var reader = new FileReader();
reader.onload = function(e) {
$("<li><img src='" + e.target.result +"'></li>").appendTo(previewHolder);
}
previewHolder.show();
reader.readAsDataURL($(this)[0].files[i]);
}
} else {
alert("This browser does not support FileReader.");
}
} else {
alert("Please select only images");
}
});
} //Image upload preview
if($("ul.imagePreview").length) {
$("ul.imagePreview").on("click", "li", function(event) {
if($(this).hasClass("selected")) {
$(this).removeClass("selected");
$(this).find("div").remove();
} else {
$(this).addClass("selected");
$(this).append("<div><label><span>Image Alt</span><input type='text'></label><label><span>Image Caption</span><input type='text'></label></div>");
}
});
$("ul.imagePreview").on("click", "div", function(event) {
event.stopPropagation();
});
}//add form when clicked on an image
if ($("a.uploadMediaImageForm").length) {
$("a.uploadMediaImageForm").magnificPopup({
type: 'inline',
preloader: false,
closeOnBgClick: false,
enableEscapeKey: false,
focus: '#name',
removalDelay: 500, //delay removal by X to allow out-animation
// When elemened is focused, some mobile browsers in some cases zoom in
// It looks not nice, so we disable it:
callbacks: {
beforeOpen: function() {
if ($(window).width() < 700) {
this.st.focus = false;
} else {
this.st.focus = '#name';
}
this.st.mainClass = this.st.el.attr('data-effect');
},
beforeClose: function() {
///$("ul.imagePreview").empty();
var countFiles = "";
var imgPath = "";
var extension = "";
var previewHolder = $("ul.imagePreview");
previewHolder.empty();
$("#fileForm")[0].reset();
}
},
midClick: true // allow opening popup on middle mouse click. Always set
});
}
})(); //popup Forms and Uploads
div.uploadPopup {
width: 80%;
margin: auto;
background: white;
position: relative;
padding: 40px;
}
label {
width: 100%;
margin-bottom: 20px;
clear: both;
}
ul.imagePreview {
width: 100%;
clear: both;
display: block;
}
ul.imagePreview li {
width: 100%;
display: block;
margin-bottom: 20px;
max-height: 150px;
cursor: pointer;
}
ul.imagePreview li.selected {
max-height: auto;
}
ul.imagePreview li img {
max-height: 150px;
display: block;
margin: auto;
}
<link href="https://cdn.jsdelivr.net/jquery.magnific-popup/1.0.0/magnific-popup.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.0.1/jquery.magnific-popup.min.js"></script>
Upload Media
<div id="uploadMediaImageForm" class="uploadPopup mfp-with-anim mfp-hide">
<form action="#" id="fileForm">
<label class="upload">
<span>Upload Images</span>
<input id="imageUpload" type="file" multiple>
</label>
<ul class="imagePreview">
</ul>
</form>
</div>
I am implementing a scrollable for a portfolio gallery.
(scrollable = scrollable plugin from http://flowplayer.org/tools/index.html )
There will be one item visible at a time.
By default, scrollable positions the prev/next buttons outside of the image area and clicking on the current image advances the scrollable content.
I would like to have the prev/next render within the image area.
I would like to have an image caption appear when mousing over the lower part of the image.
Mock-up:
http://i303.photobucket.com/albums/nn160/upstagephoto/mockups/scrollable_mockup.jpg
Any ideas on how to achieve one or both of these?
Thank you!
The main part of your approach will be like this in your html:
<div id="mainContainer">
<div class="scrollable">
<div class="items">
<div class="scrollableEl">
<img src="yourimage.jpg" />
<div class="caption">Your caption</div>
</div>
<div class="scrollableEl">
<img src="yourimage2.jpg" />
<div class="caption">Your caption 2</div>
</div>
... so on ...
</div>
</div>
«
«
</div>
And like so in your CSS:
.scrollable {
position:relative;
overflow:hidden;
width: 660px;
height:90px;
}
.scrollable .items {
width:20000em;
position:absolute;
}
.items .scrollableEl {
float:left;
positon: relative;
}
.items .scrollableEl .caption {
display:none;
position: absolute;
bottom: 0;
height: 100px;
width: 660px;
}
.items .scrollableEl:hover .caption { /*this will show your caption on mouse over */
display:none;
}
.next, .prev {
position: absolute;
top: 0;
display: block;
width: 30px;
height: 100%;
}
.next {
right: 0;
}
.prev {
left: 0;
}
#mainContainer {
position: relative;
}
The javascript should be fairly standard. Hope this helps!
DEMO: http://jsbin.com/ijede/2 SOURCE: http://jsbin.com/ijede/2/edit
$(function() {
// 5 minute slide show ;-)
$('.next,.prev').click(function(e) {
e.preventDefault();
var pos = parseInt($('.current').attr('id').split('_')[1]);
var tot = $('.slides a').size() - 1;
var click = this.className;
var new_pos = (click == 'next') ? pos + 1: pos - 1;
var slide = ( click == 'next') ?
(pos < tot ? true : false) : (pos > 0 ? true : false);
if (slide) $('.current').toggle(500,function() {
$(this).removeClass('current');
});
$('#pos_' + new_pos).toggle(500,function() {
$(this).attr('class', 'current');
});
});
//cross-browser div :hover
$('.next,.prev').hover(function() {
$(this).children().children().fadeIn(500);
},function() {
$(this).children().children().fadeOut(500);
});
//auto add unique id to each image
$('.slides a').each(function(e) {
$(this).attr('id', 'pos_' + e);
if (!e) $(this).attr('class', 'current');
});
});
CSS on source!
NOTE: since read the plugin doc require more time for me than make a slideshow from scratch, i have maked a fresh one!
hope you like it!