I have icons over image as shown below.
index.php
<div class="container-fluid" >
<h1 id="service" data-animate="fadeInLeft" data-delay="200">Our Services</h1>
<div class="col-md-12 col-lg-12 col-xs-12 col-sm-12 service_img" id="services_img">
<p class="service_p" id="p" style="padding-bottom: 2px;"></p>
<h1 class="service_head" id="desc"></h1>
<section class="customer-logos slider" style="top: 35%;padding-left: 50px;" id="service_images">
<div class="slide">
<img class="image_service contrast" id="image_service_1" src="images/services_icons/drafting.png" alt="drafting" onclick="desc1()">
<div class="head_service" style="color:white;margin-left: -10px;">Drafting Services</div>
</div>
<div class="slide"><img class="image_service" id="image_service_2" src="images/services_icons/Emerging market penetration.png" alt="Emerging market penetration" onclick="desc2()">
<div class="head_service" style="color:white;margin-left: -15px;">Emerging market<br><span id="penetrate" style="margin-left: 15px;">penetration</span></div>
</div>
<div class="slide"><img class="image_service" id="image_service_3" src="images/services_icons/Engineering analytics.png" alt="Engineering analytics" onclick="desc3()">
<div class="head_service" id="engg_analytics" style="color:white;margin-left: -15px;">Engineering Analytics</div>
</div>
<div class="slide"><img class="image_service" id="image_service_4" src="images/services_icons/Industrial IoT.png" alt="Industrial IoT" onclick="desc4()">
<div class="head_service" style="color:white;margin-left: -5px;">Industrial IoT</div>
</div>
<div class="slide"><img class="image_service" id="image_service_5" src="images/services_icons/Life cycle.png" alt="Life cycle" onclick="desc5()">
<div class="head_service" style="color:white;margin-left: -2px;">Life Cycle</div>
</div>
text.css
.bg-img {
position: relative;
width: 100%;
height: 100%;
background-size: cover;
}
.bg-img:before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
/*background-image: linear-gradient(to bottom right, #002f4b, #dc4225);*/
opacity: .6;
}
text.js
$('#image_service').click(function() {
$('#image_service').animate({
'marginTop' : "-=30px" //moves up
});
});
I need a solution for this:
When i click on the icon it should be moved to center. I am able to move icon but it is not getting out exactly what i need.
Thank you in Advance!!
A simple jquery code need to be implemented on the icon click.
CSS:
.iconOne { position:relative }
.iconOne.centered { top:-100px; }
jS:
$(".iconOne").click(function(e) {
$(this).addClass("centered");
});
Comment if this is what you want like.
Thanks
Related
I'm trying to make something like in this example: Link: ScrollMagic Examples
I can't get it to work. The #pageContent height is only 0 when ScrollMagic.min.js is included.
Picture - Element: #pageContent in inspect
What I have tried:
Using to examples source code
Removing my scripts
//Copied from ScrollMagic Examples
$(function () { // wait for document ready
// init
var controller = new ScrollMagic.Controller();
// define movement of panels
var wipeAnimation = new TimelineMax()
.fromTo("#pageSec1", 1, {x: "-100%"}, {x: "0%", ease: Linear.easeNone})
.fromTo("#pageSec2", 1, {x: "100%"}, {x: "0%", ease: Linear.easeNone})
.fromTo("#pageSec3", 1, {y: "-100%"}, {y: "0%", ease: Linear.easeNone});
// create scene to pin and link animation
new ScrollMagic.Scene({
triggerElement: "#pageContent",
triggerHook: "onLeave",
duration: "300%"
}).setPin("#pageContent")
.setTween(wipeAnimation)
.addIndicators()
.addTo(controller);
});
* {
box-sizing: border-box;
font: normal 14px Arial;
}
#pinContainer {
width: 100%;
height: 100%;
overflow: hidden;
}
section {
height: 100%;
width: 100%;
position: absolute;
padding: 15vh 20vw;
background: white;
}
.space {
height: 100vh;
padding: 15vh 20vw;
width: 100%;
border-bottom: 1px solid #000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="space">Space</div>
<div class="content" id="pageContent">
<section class="section-img" id="pageSec1">
<div class="section-content">
<div class="img-display">
<img src="../img/me.jpg" alt="About Me">
</div>
<div class="info">
<h2>About Me</h2>
<div class="text"></div>
<a class="more" href="about.html">Read More</a>
</div>
</div>
</section>
<section class="section-card" id="pageSec2">
<div class="section-content">
<div class="info">
<h2>My Work</h2>
<a class="more">See All</a>
</div>
<div class="card-content">
<div class="card">
<h4>Company</h4>
<h3>Online Warehouse Status</h3>
<hr>
<div class="text">This is a dashboard program created to see the warehouse stock online. I have also made a user system and a reusable database system.</div>
<a class="more">Read More</a>
</div>
<div class="card">
<h4>Hobby Project</h4>
<h3>Computer Builder</h3>
<hr>
<div class="text">This is a dashboard program created to see the warehouse stock online. I have also made a user system and a reusable database system.</div>
<a class="more">Read More</a>
</div>
</div>
</div>
</section>
<section class="section-info" id="pageSec3">
<div class="section-content">
<div class="info">
<h2>Contact Me</h2>
<div class="info-box">
<div class="info-boxitem">
<h3>Email</h3>
<h4>email#gmail.com</h4>
</div>
<div class="info-boxitem">
<h3>Phone</h3>
<h4>+45 00 00 00 00</h4>
</div>
</div>
</div>
</div>
</section>
</div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/debug.addIndicators.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.4/gsap.min.js"></script>
I changed the version of the ScrollMagic.js library to 2.0.1 and it started working for me!
I had the exact same problem. It was working fine on most recent Chrome 86 Windows, but not on Chrome 86 macOS. Same for the other browsers I tested.
The solution for me was to have height: 100vh; instead of 100% in #pinContainer.
I am at my last straw with this one. I cannot figure this out and it has been three days now of trying. I am using w3.css with jQuery UI and jQuery UI.css.
ISSUE: The progress bars appear but don't fill. When you remove the href to w3.css, the progress bars work just fine. But otherwise, the fill doesn't occur.
FIDDLE: http://jsfiddle.net/kjg95pxq/7/
HTML
<body class="w3-content" style="max-width:1300px">
<!-- ROW 3.1: Skillsets Section -->
<div class="w3-container">
<div class="progressbar w3-center" id="progressbar" data-value="50">
<p style="position:absolute">20%</p>
</div>
</div>
<div class="w3-row" id="rowWaypoint2">
<div class="capsuleBox3 animated" id="capBox3">
<div class="w3-half w3-dark-grey w3-container w3-center" id="contact" style="height:700px">
<div style="padding-top:55px">
<h1>Skillsets</h1>
<p>My current skill progressions</p>
</div>
<!-- Progress Bar for JavaScript/jQuery -->
<div style="padding-top:18px">
<p> Tacos </p>
</div>
<div style="padding-top:0px">
<div class="progressbar w3-center" data-value="40">
<p style="position:absolute">20%</p>
</div>
</div>
<div class="progressbar w3-center" id="progressbar" data-value="80">
<p style="position:absolute">20%</p>
</div>
<div class="progressbar w3-center" data-value="20">
<p style="position:absolute">20%</p>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
</body>
CSS
.progressbar {
width: 80%;
margin: 20px auto;
}
.ui-progressbar-value {
transition: width 0.5s;
-webkit-transition: width 2s;
}
JS
$(document).ready(function() {
pbRun();
function pbRun() {
$(".progressbar").progressbar();
//this initializes the widget
$(".progressbar").each(function() {
var valPB = parseInt($(this).data('value'));
var percentPB = valPB;
$(this).progressbar("option", "value", percentPB);
});
}
});
Try using:
.ui-progressbar .ui-progressbar-value {
box-sizing: content-box;
}
w3.css adds:
*, *:before, *:after {
box-sizing: inherit;
}
which messes with code.
JSfiddle
Im having an issue while using media queries with "Swipe".
If i open my website in "tablet" mode, the swipe works in Mobile and Tablet forms, Desktop wont.
BUT, if i save my files again in the text editor and open them in Desktop mode, they work, but not in Mobile and Tablet.
.swipe {
overflow: hidden;
visibility: hidden;
position: relative;
-ms-touch-action: none;/*pan-y on desktop*/
touch-action: none; /*pan-y on desktop*/
}
.swipe-wrap{
overflow: hidden;
position: relative;
}
.swipe-wrap > div {
float: left;
width: 100%;
position: relative;
}
<div id="slidepassos" class="swipe slidepassos">
<div class="swipe-wrap">
<div class="mySlides">
<div class="passo-um">
<div class="passoscont">
<h1>How?</h1>
<h2>Step 1:</h2>
<img src="img/passoumilu.svg" class="passoumilu">
<p>Do your coach oriented WOD. Remember, know your limits and try to break them.</p>
<img src="img/swipeleft.png" class="swipeleftcontent">
<img src="img/swipeleftdesktop.png" class="swipeleftcontent-desktop">
</div>
</div>
</div>
<div class="mySlides">
<div class="passo-dois">
<div class="passoscont">
<h1>How?</h1>
<h2>Step 2:</h2>
<img src="img/passodoisilu.svg" class="passoumilu">
<p>Now your coach gets the results of your efforts and publish them in the box page on Crossagenda.</p>
<img src="img/swipeleft.png" class="swipeleftcontent">
<img src="img/swipeleftdesktop.png" class="swipeleftcontent-desktop">
</div>
</div>
</div>
<div class="mySlides">
<div class="passo-tres">
<div class="passoscont">
<h1>How?</h1>
<h2>Step 3:</h2>
<img src="img/passotresilu.svg" class="passoumilu">
<p>Remember, get up your energy levels and while you're at it, check your WOD results and progress in Crossagenda.</p>
<img src="img/swipeleft.png" class="swipeleftcontent">
<img src="img/swipeleftdesktop.png" class="swipeleftcontent-desktop">
</div>
</div>
</div>
<div class="mySlides">
<div class="passo-quatro">
<div class="passoscont">
<h1>How?</h1>
<h2>Step 4:</h2>
<img src="img/passoquatroilu.svg" class="passoumilu">
<p>Chat with your colleagues in our app or poke them in your next class ;)</p>
<img src="img/swipeleft.png" class="swipeleftcontent">
<img src="img/swipeleftdesktop.png" class="swipeleftcontent-desktop">
</div>
</div>
</div>
</div>
<script type="text/javascript">
window.mySwipe = Swipe(document.getElementById('slidepassos'));
</script>
I've been trying to figure this out for a couple days now and can't seem to make any headway. I am trying to do a simple left and right scroll using images as the scrollers but I can't seem to get it to work. Here is my code: http://jsfiddle.net/7GrTM/1/
HTML
<div class="outerwrapper">
<div class="innerwrapper">
<div class="productsbox">
<img class="box_image" src="images/productsbox1.png" style="width:222px" alt="this"/>
</div>
<div class="spacer"></div>
<div class='productsbox'>
<img class='box_image' src="images/productsbox2.png" style='width:222px' alt="this"/>
</div>
<div class="spacer"></div>
<div class='productsbox'>
<img class='box_image' src="images/productsbox3.png" style='width:222px' alt="this"/>
</div>
<div class="spacer"></div>
<div class='productsbox'>
<img class='box_image' src="images/productsbox4.png" style='width:221px' alt="this"/>
</div>
<div class="spacer"></div>
<div class='productsbox'>
<img class='box_image' src="images/productsbox5.png" style='width:221px' alt="this"/>
</div>
<div class="spacer"></div>
<div class='productsbox'>
<img class='box_image' src="images/productsbox6.png" style='width:221px' alt="this"/>
</div>
</div>
</div>
<div class="productspace">
<img src="images/arrowleft.png" id="#left" alt="left"/>
<img src="images/arrowright.png" id="#right" style="padding-left: 10px;" alt="right"/>
</div>
JS
$(function () {
$("#right, #left").click(function () {
var dir = this.id == "right" ? '+=' : '-=';
$("#outerwrapper").stop().animate({ scrollLeft: dir + '422' }, 1000);
});
});
CSS
.spacer {
width: 20px;
height: 319px;
display: inline-block;
}
.outerwrapper {
margin: 0px auto;
width: 1050px;
height: 323px;
display: inline-block;
overflow: hidden;
}
.innerwrapper {
width: 1600px;
height: 322px;
margin: 0 auto;
display: inline-block;
overflow: hidden;
}
Any help will be appreciative.
Your IDs are wrong, you have named them #left and #right, not simply left and right. In your JSfiddle you have managed to set this as the id: #left1 and #right1.
Solution: Change the ID's to say left and right, so you will have:
<div class="productspace">
<img src="images/arrowleft.png" id="left" alt="left"/>
<img src="images/arrowright.png" id="right" style="padding-left: 10px;" alt="right"/>
</div>
You are also trying to access your div with class outerwrapper as a id, not as a class. Either change outerwrapper to be an ID so <div id="outerwrapper"> or change the jquery to look for the class: $(".outerwrapper") (the prior solution is in my mind superior, so change div id).
Good day, I want to attach click method to div, by BIND method.
My code of attaching is
$("#brend_list > #mCSB_1 > .mCSB_container > div > a").bind('click',function(){
id=$(this).attr('id');
ttl=$(this).parent().children("span").html();
state=$(this).hasClass("checked");
if(state) {$(this).removeClass("checked");
$("#"+id+"_filter").remove();
}
else{$(this).addClass("checked");
$("#filters").append(" <div style='display:inline-block;' id='"+id+"_filter' class='filter_brands' onclick='brend_uncheck(\""+id+"\"); $(this).remove();'><span>"+ttl+"</span><b>x</b></div> ");
}});
My div structure is
<div id="brend_list" class="mCustomScrollbar _mCS_1">
<div class="mCustomScrollBox mCS-light" id="mCSB_1" style="position:relative; height:100%; overflow:hidden; max-width:100%;">
<div class="mCSB_container" style="position: relative; top: 0px;">
<div><a id="filt_brend001"></a><span>Loreal Paris</span></div><!-- this <a> -->
<div><a id="filt_brend002"></a><span>Laura Mercier</span></div>
...........
</div>
<div class="mCSB_scrollTools" style="position: absolute; display: block;">
<div class="mCSB_draggerContainer"><div class="mCSB_dragger" style="position: absolute; height: 110px; top: 0px;" oncontextmenu="return false;">
<div class="mCSB_dragger_bar" style="position: relative; line-height: 110px;">
</div>
</div>
<div class="mCSB_draggerRail">
</div>
</div>
</div>
</div>
</div>
But it doesn't attach.
You should either change
$("#brend_list > #mCSB_1 > .mCSB_container > div > a")
to
$("#brend_list > #mCSB_1 > .mCSB_container > div > a + span")
A fiddle with above is here.
or, change the HTML from
<div><a id="filt_brend001"></a><span>Loreal Paris</span></div>
to
<div><a id="filt_brend001"><span>Loreal Paris</span></a></div>
Fiddle with above in action is here.