Trying to Slide p Right to Left direction by jquery to this slider. This slider has fade effect by default, I'm trying give slideLeft effect to p description of slider, not to whole slider elements.
HTML:
<div id="headslide">
<ul>
<li class="post-content">
<div class="slidshow-thumbnail">
<a href="#">
<img src="http://3.bp.blogspot.com/-h4-nQvZ5-VE/VQ3HLtSS3ZI/AAAAAAAABIc/iaOda5zoUMw/s350-h260-c/girl_with_winter_hat-wallpaper-1024x768.jpg" height="260" width="350"/>
</a>
</div>
<span class="content-margin">
/* Description */
<p>Cicero famously orated against his p...</p>
/* Title */
<h3>Download Premium Blogger Templates</h3>
<span class="info">Info</span>
</span>
</li>
<li class="post-content">
<div class="slidshow-thumbnail">
<a href="#">
<img src="http://3.bp.blogspot.com/-YfkF1u_VB40/VWr5dYf00gI/AAAAAAAABW8/wv2e-Lu4etw/s390-h340-c-h340-c/11071467_807062866056131_872486685669967339_n.jpg" height="260" width="350"/>
</a>
</div>
<span class="content-margin">
/* Description */
<p>SEO friendly Flat style Custom Fonts.</p>
/* Title */
<h3>Modern with a pixel-perfect eye</h3>
<span class="info">Info</span>
</span>
</li>
</ul>
</div>
Please see this Fiddle >>. I'm trying to do this by jquery.
I have tried this $(".content-margin").delay(400).show("p", { direction: "left" }, 1200);
Not working, How to give slideLeft effect to only p element, any suggestion?
the headslide slider supports callbacks that you can use to hide/slide the "p" elements.
$('#headslide ul').cycle({
timeout: 4000,
pager: '#headslide .pager',
after: function(currSlideElement, nextSlideElement, options, forwardFlag){
$(nextSlideElement).find("p" ).hide();
$(nextSlideElement).find("p" ).toggle("slide");
return false;
}
jfiddle:http://jsfiddle.net/bacec898/7/
reference: http://jquery.malsup.com/cycle/options.html
Related
I am currently trying to remove the arrows from the carousel when there is no image present. The reason for me trying to do so, is simply because I am trying to load several images into a carousel from a database into a given section. This section is recreated multiple times and it doesn't always contain images.
The issue that I am having is that, whenever the bootstrap carousel doesn't have any images loaded, it just displays the carousel arrows on the side. This gives a bad look to the current section and I would like to dispose of that.
How can I remove the carousel arrows when there aren't any images
loaded in the carousel?
Here is a JsFiddle which contains what I've done so far, it is heavy inspired by several other posts. This only removes the left arrow on the first slide and the right arrow on the last slide.
Here you can preview how does the carousel look whenever there are absent images. I have set a black background of 400px in order for the arrows to be more easily spotted. Absent Images JsFiddle
Here is the code I have so far:
<div class="container">
<div id="main_area">
<!-- Slider -->
<div class="row">
<div class="col-xs-12" id="slider">
<!-- Top part of the slider -->
<div class="row">
<div class="col-sm-8" id="carousel-bounding-box">
<div class="carousel slide" id="myCarousel">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item" data-slide-number="0">
<img src="http://placehold.it/770x300&text=one"></div>
<div class="item" data-slide-number="1">
<img src="http://placehold.it/770x300&text=two"></div>
<div class="item" data-slide-number="2">
<img src="http://placehold.it/770x300&text=three"></div>
<div class="item" data-slide-number="3">
<img src="http://placehold.it/770x300&text=four"></div>
<div class="item" data-slide-number="4">
<img src="http://placehold.it/770x300&text=five"></div>
<div class="item" data-slide-number="5">
<img src="http://placehold.it/770x300&text=six"></div>
</div><!-- Carousel nav -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next" id="arrow-right">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
</div>
</div>
</div>
</div><!--/Slider-->
</div>
JQuery Code:
jQuery(document).ready(function($) {
$('.carousel').carousel({
interval: false,
})
$(document).ready(function () { // on document ready
checkitem();
});
$('#myCarousel').on('slid.bs.carousel', checkitem);
function checkitem() // check function
{
var $this = $('#myCarousel');
if ($('.carousel-inner .item:first').hasClass('active')) {
$this.children('.left.carousel-control').hide();
} else if ($('.carousel-inner .item:last').hasClass('active')) {
$this.children('.right.carousel-control').hide();
} else {
$this.children('.carousel-control').show();
}
}
$("img").error(function(){
$(this).hide('#arrow-right');
});
});
Here are the answers that I've already checked for solutions:
Link 1Link 2
Thank you in advance.
Using jQuery you could try something like..
$(document).ready(function(){
if($('.carousel-inner .item img').attr('src') == '') {
$('.carousel-control').css('display', 'none');
}
});
fiddle
I am trying to slide a navigational menu. I am using sliiide.min.js. The following settings work when I stay at the top of the page, but as I scrolls down and click to slide the menu it gives a blank white portion in the place of the actual menu, which I can't figure out how to sort out. If any of you experienced similar problems before, please kindly share. I am giving full code.
THE HTML MENU
<div id="tablet-mobile-menu" class="sidr left" style="visibility: hidden; display: block; left: 0px;">
<div class="utility-nav">
<div class="main-menu">
<ul id="burger-menu" class="links clearfix">
<li class="menu-15461 first">
Follow Us On
</li>
<div class="utility-menu">
<ul id="hamburger-utility-menu" class="links clearfix">
<li class="menu-7731 first">
Facebook
</li>
Pinterest
</li>
</ul>
</div>
<li class="menu-15461 first" style="">
Sections
</li>
</ul>
</div>
<p>Men's Health, The Brand Men Live By</p>
<p>Copyright © 2016 Rodale Inc. No reproduction, transmission or display is permitted without the written permissions of Rodale Inc.</p>
<p>
Privacy Policy.
About Us.
</p>
</div>
</div>
HERE IS THE JS CONFIGURATION:
<?php $this->script()->captureStart(); ?>
var settings = {
toggle: "#menu-btn-toggle", // the selector for the menu toggle, whatever clickable element you want to activate or deactivate the menu. A click listener will be added to this element.
exit_selector: ".is-active", // the selector for an exit button in the div if needed, when the exit element is clicked the menu will deactivate, suitable for an exit element inside the nav menu or the side bar
animation_duration: "0.1s", //how long it takes to slide the menu
place: "left", //where is the menu sliding from, possible options are (left | right | top | bottom)
animation_curve: "cubic-bezier(0.54, 0.01, 0.57, 1.03)", //animation curve for the sliding animation
body_slide: true, //set it to true if you want to use the effect where the entire page slides and not just the div
no_scroll: true, //set to true if you want the scrolling disabled while the menu is active
};
$('#tablet-mobile-menu').sliiide(settings); //initialize sliiide
<?php $this->script()->captureEnd(); ?>
HERE IS THE HTML WHERE THE CLICK OR TOGGLE BUTTON RESIDES:
<div id="menu-btn">
<a href="/" title="Menu" id="menu-btn-toggle" class="clickable">
<!--<i class="fa fa-bars fa-2x" aria-hidden="true"></i>-->
<!--<i class="fa fa-times fa-2x" aria-hidden="true"></i>-->
<span></span>
</a>
</div>
Perhaps the slider is there its just that its sitting at the top of the page so what your seeing is the bottom of the menu.
have you tried to add a CSS style to the top of the navigation so its sticks to the top of page even when scrolling.
.sticky {
position: fixed;
width: 100%;
left: 0;
top: 0;
z-index: 100;
border-top: 0;
}
I'm just a graphic design student and I barely know about coding or javascript.
In my website, I have horizontal scroll with a left navigation bar with a fixed position. I want to filter all of my projects in different categories. For example, when I click on "Branding" all the branding projects show up and all the other projects disappear.
I've tried different options and none of them work. When I click on the filter it doesn't do anything.
I don't know if there is a problem with my html or the script. Please help me.
I used and kind of changed the jQuery from this website:
queness.com Below is all of my html and everything.
https://jsfiddle.net/PaulinaPaulino/hbk8z161/
<body>
<nav class="fixed-nav-bar">
<li>
<div id="home">
Paulina Paulino
</div>
</li>
<li>All</li>
<li>Branding</li>
<li>Editorial</li>
<li>Infographics</li>
<li>Photography</li>
<li>Poster</li>
<li>Typography</li>
<li>
<div id="about">
About
</div>
</li>
<li>
<div id="contact">
—paulinapaulino9#gmail.com
<div class="icons">
<a target="_blank" href="https://twitter.com/PaulinaPaulino9"><img src="icons/twitter.png" alt="twitter" style="height:40px;"></a>
<a target="_blank" href="https://www.instagram.com/paulinapaulino/"> <img src="icons/instagram.png" alt="instagram" style="height:40px;"></a>
<a target="_blank" href="https://www.linkedin.com/in/paulina-paulino-94b29490"><img src="icons/linkedIn.png" alt="linkedinprofile" style="height:40px;"></a>
<a target="_blank" href="Resume.pdf"><img src="icons/resume.png" alt="resume" style="height:35px;"></a>
</div>
</div>
</li>
</nav>
<div id="portfoliolist">
<div class="panel" data-cat="photography">
<div class="project1">
<a href="####"><img src="pages/projects/p1-Paint/_MG_8797.jpg" alt="couple-covered-in-paint" style="height:590px;">
<p>Paint</p>
</a>
</div>
</div>
<div class="panel" data-cat="infographics">
<div class="project2">
<a href="###"><img src="pages/projects/p2-Online-Affairs-Infographic/01-front-top.png" alt="infographic" style="height:590px;">
<p>Online Affairs Infographic</p>
</a>
</div>
</div>
<div id="project3" class="panel">
</div>
<div id="project4" class="panel">
</div>
</div>
<script>
$(function() {
var filterList = {
init: function() {
// MixItUp plugin
// http://mixitup.io
$('#portfoliolist').mixitup({
targetSelector: '.panel',
filterSelector: '.filter',
effects: ['fade'],
easing: 'snap',
// call the hover effect
onMixEnd: filterList.hoverEffect()
});
},
hoverEffect: function() {
// Simple parallax effect
$('#portfoliolist .portfolio').hover(
function() {
$(this).find('.label').stop().animate({
bottom: 0
}, 200, 'easeOutQuad');
$(this).find('img').stop().animate({
top: -30
}, 500, 'easeOutQuad');
},
function() {
$(this).find('.label').stop().animate({
bottom: -40
}, 200, 'easeInQuad');
$(this).find('img').stop().animate({
top: 0
}, 300, 'easeOutQuad');
}
);
}
};
// Run the show!
filterList.init();
});
</script>
</body>
I just had to apply everything that this filter jQuery did from the link below.
http://www.newmediacampaigns.com/blog/a-jquery-plugin-to-create-an-interactive-filterable-portfolio-like-ours
I have this script that does a few things but the focus is the last line as it doesn't seem to make the class opacity arrive at 100%....
$('.fa-briefcase').parent().on('click', function () {
$("#colorscreen").remove();
$( '#menu' ).multilevelpushmenu( 'collapse' );
$("body").append('<div id="colorscreen" class="animated"></div>');
$("#colorscreen").addClass("fadeInUpBig");
$('.fadeInUpBig').css('background-color', 'rgba(33,29,134, 0.2)');
$(".tile-area-main").css({width: "720px"}).load("content.html #overview");
$(".submenu-ctn").load("content.html .submenu-ctn");
$('.nav-toggle').removeClass('active');
$(this).addClass('active');
$( ".submenu-ctn" ).animate({ opacity: 10 }, 2000);
});
the css of the class is this....
.metro .submenu-ctn {
position: fixed;
left: 3px;
top: 150px;
height:400px;
width:263px;
float:left;
cursor: pointer;
overflow: hidden;
z-index : 999;
opacity:0;
}
does anyone know why the class .submenu-ctn isn't animating to 100% opacity within 2 seconds ?
EDIT ...
Since the issue is still causing issues I wanted to post the html of the pages (on request) that are being used here to help...
... fro the index.html page (where stuff is getting loaded to)
<!-- INITIALISE THE SPACE FOR CONTENT -->
<div class="tile-area">
<!--INITIALISE THE DIVS FOR CONTENT TO BE LOADED INCLUDING SUBMENU OPTIONS -->
<div class="submenu-ctn"></div>
<div class="tile-area-main"></div>
the content.html page that is having it's divs selectively loaded into the divs above...
<div class="submenu-ctn">
<header class='masthead'>
<div class='brand-container'>
<a href='#'>
<span class='brand-initials'>Who Are Musability?</span>
<span><i class="fa fa-briefcase brand-initials-icon"></i></span>
</a>
</div>
<nav>
<div class='nav-container'>
<div>
<a class='slide' href='#'>
<span class='element'>Mission and Values</span>
</a>
</div>
<div>
<a class='slide' href='#'>
<span class='element'>Ethos</span>
</a>
</div>
<div>
<a class='slide' href='#'>
<span class='element'>Music</span>
</a>
</div>
<div>
<a class='slide' href='#'>
<span class='element'>Expression</span>
</a>
</div>
<div>
<a class='slide' href='#'>
<span class='element'>People</span>
</a>
</div>
<div>
<a class='slide' href='#'>
<span class='element'>Potential</span>
</a>
</div>
</div>
</nav>
</header>
</div>
opacity property values are from 0, 0.1,0.2,0.3, etc, etc to 1 so 10 its invalid
change it to
$( ".submenu-ctn" ).animate({ opacity: 1 }, 2000);
Example
opacity’s initial value is 1, so make sure to animate to 1.
Here’s what the spec says about opacity: http://www.w3.org/TR/css3-color/#transparency
Try this:
$('.submenu-ctn').animate({
opacity: 1
}, 2000);
Here’s a jsbin to illustrate this: http://output.jsbin.com/lefilerube/2/
Also consider fadeTo since, according to jQuery’s docs, it should be used when you’d like to “adjust the opacity of the matched elements”.
With your example, that would translate to:
$('.submenu-ctn').fadeTo(2000, 1);
Hope that helps.
How can I get an Image overlay to work with this code?
What I want is a set of icons to overlay, ontop of a image when the cursor moves over it.
http://socialartist.co/index.html
The code in question is HTML 5 and CSS 3, and has quite a lot of mark-up:
<ul class="items x_columns">
<li data-id="id-1" data-cat="#luxury">
<div class="preview"><a href="#" class="frame">
<img src="https://i1.sndcdn.com/avatars-000008744854-5sr588-large.jpg?d408275" id="imgSmile" alt=""/></a>
</div>
<a class="title" href="#">Kirkbridge DNB</a>
<p>UK | Drum and Bass</p>
</li>
When I try to add a new div it just breaks the design (eg messes up the preview class border)
Is there 'an easy way' to just overlay onto an existing image, as above.
I don't really know how to set this up on Fiddle; I am hoping that ppl could just use developer tools (inspect element) on the page URL above?
If I got it right:
Add the icon you want to dispay inside the anchor tag:
Quick and dirty example: http://jsfiddle.net/ZVSVw/
<a href="#" class="frame">
<img src="https://i1.sndcdn.com/avatars-000008744854-5sr588-large.jpg?d408275" id="imgSmile" alt=""/>
<div class=overlay>ICON</div>
</a>
Set it to display: none by default and style it with the selector .frame:hover > .overlay.
To your comment
remove the following line from your style.css:1654:
a > .frame:hover, a.frame:hover{
background: #ffffff;
/* border: 1px solid #24bfb6; remove this line */
}
You could add the other overlay picture with the display: none; property set and then basically toggle between the two pictures fiddle
Javascript:
jQuery('li[data-id="id-3"] > div').on('hover', 'a', function() {
jQuery(this).find('img').toggle();
jQuery(this).find('div.overlayContent').toggle();
});
Html:
<li data-id="id-3" data-cat="#holiday">
<div class="preview">
<a href="#" class="frame">
<img src="http://..." alt="default picture">
<div class="overlayContent" style="display: none;">...overlay content</div>
<!--img src="http://..." alt="alternate picture" style="display: none;"-->
</a>
</div>
<a class="title" href="#">TEST ME!</a>
<p>Test this one!</p>
</li>