I have a problem with owl carousel and till now I don't have any ideas how to fix it.
So on the image 1 you can see the normal behaviour of the slider. On the second one you will see the extended functionality of it. The idea is very simple, when user click on the element, he should expand it, but when the element is expanded all other element goes to 2 rows and I don't want to happen.
Image 1
Image 2
also Source code of one element
<div class="element box-shadow">
<div class="child">
<div class="row">
<div class="col-xs-12 col-md-8">
<span>05.</span>
<h3>Graphic Designer</h3>
<p class="inventive">Inventive Studio</p>
<p class="view-more">View more <img src="assets/images/view-more.svg" /></p>
</div>
<div class="col-xs-12 col-md-4 portfolio-image" >
<img src="assets/images/inventive-small-img.png" />
</div>
</div>
</div>
<div class="parent hidden">
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="row">
<div class="col-xs-12 col-md-8">
<div class="row " style="margin-bottom: 15px;" >
<div class="col-xs-12 col-md-3">
<img src="assets/images/inventive-small-img.png" style="width:34px" class="rounded-circle">
</div>
<div class="col-xs-12 col-md-9 text no-padding" >
<h3>Graphic Designer</h3>
<p class="inventive">Inventive Studio</p>
</div>
</div>
</div>
<div class="col-xs-12 col-md-4 social-el" style="padding-left:0;">
<div class="stars">
<img class="mr-2" src="assets/images/full_star.svg" />
<img class="mr-2" src="assets/images/full_star.svg" />
<img class="mr-2" src="assets/images/half_star.svg" />
<img class="mr-2" src="assets/images/empty_star.svg" />
<img src="assets/images/empty_star.svg" />
</div>
</div>
</div>
<img src="assets/images/inventive-studio-img.png" class="img-fluid">
<div class="content">
<p >Designing and producing catalogs, sales sheets, proposals, scenario illustrations, brochures, posters, custom displays for trade shows and in-house exhibits and all others items.</p>
<div class="row">
<div class="col-xs-12 col-md-6">
<a class="view-less" href="#"><img src="assets/images/view-more.svg"/> View Less</a>
</div>
<div class="col-xs-12 col-md-6">
<div class="stars">
<img src="assets/images/Facebook.svg"/>
<img class="mr-10" src="assets/images/twitter.svg"/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
also will share and jquery code
$(".owl-carousel").owlCarousel({
margin:10,
loop: true,
autoWidth: true,
items:3,
rewind: true,
autoplay: true,
responsiveClass:true,
});
$('.work').each(function(i, el) {
$parent = $(el);
$('.element', $parent).each(function(i, item) {
$element = $(item)
$element.on('click', function(e) {
$current = $(this)
console.log($current)
if ($('.parent', $current).hasClass('hidden')) {
$('.parent', $current).removeClass('hidden');
$current.addClass('expand-element');
$current.css('border-radius', 10)
$('.child', $current).addClass('hidden');
} else {
$current.removeClass('expand-element');
$('.parent', $current).removeClass('visible').addClass('hidden');
$current.css('border-radius', 20)
$('.child', $current).removeClass('hidden');
}
})
})
})
Related
I created HTML where I want if user hit <img src="https://www.fast2sms.com/panel/img/icons/add1.png" class="add-img"> then 123456789 will fill in textbox dynamically (each-one for different value as in <a> tags) and the border of that selected div will red. I try to search this method on google but I couldn't find that and I am familiar with Js and Jquery so I cant do this But Stack-overflow is developer friends and here millions of well developers and students who helps everyone. Please help to how i made this function.
My code is given below:
<div id="scroll" style="overflow: auto;height:375px">
<div class="row pt-5 pb-5 mb-5 this_contact">
<div class="col-xs-3"><img src="https://img.icons8.com/bubbles/2x/administrator-male.png" height="40"></div>
<div class="col-xs-9 no-col-r">
<span class="f_17">Shiv</span>
<a data-number="123456789" class="toggle_contact"><img src="https://www.fast2sms.com/panel/img/icons/add1.png" class="add-img"></a><br>
<span class="f_13">123456789</span><br>
</div>
</div>
<div class="row pt-5 pb-5 mb-5 this_contact">
<div class="col-xs-3"><img src="https://img.icons8.com/bubbles/2x/administrator-male.png" height="40"></div>
<div class="col-xs-9 no-col-r">
<span class="f_17">Dummy</span>
<a data-number="1253648595" class="toggle_contact"><img src="https://www.fast2sms.com/panel/img/icons/add1.png" class="add-img"></a><br>
<span class="f_13">1253648595</span><br>
</div>
</div>
If i understood correctly,
$(function(){
$('.toggle_contact').click(function(){
var contactNumber = $(this).data('number');
$(this).parents('.this_contact').addClass('selected').siblings().removeClass('selected');
$(this).parents().find('input:text').val(contactNumber);
})
})
.selected{
background-color:red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="scroll" style="overflow: auto;height:375px">
<div class="row pt-5 pb-5 mb-5 this_contact">
<div class="col-xs-3"><img src="https://img.icons8.com/bubbles/2x/administrator-male.png" height="40"></div>
<div class="col-xs-9 no-col-r">
<span class="f_17">Shiv</span>
<a data-number="123456789" class="toggle_contact"><img src="https://www.fast2sms.com/panel/img/icons/add1.png" class="add-img"></a><br>
</div>
</div>
<div class="row pt-5 pb-5 mb-5 this_contact">
<div class="col-xs-3"><img src="https://img.icons8.com/bubbles/2x/administrator-male.png" height="40"></div>
<div class="col-xs-9 no-col-r">
<span class="f_17">Dummy</span>
<a data-number="1253648595" class="toggle_contact"><img src="https://www.fast2sms.com/panel/img/icons/add1.png" class="add-img"></a><br>
</div>
</div>
<input type="text" name='name' value="">
I'm a novice coder and working on a personal website and was really hoping to use the isotope filter function in the portfolio section of my site. I've been having trouble with it however and was wondering if anyone might be able to provide guidance? I'm not sure whether it's my html or jquery at this point. Very much appreciated!
Thank you,
Joanna
HTML:
<!--PORTFOLIO-->
<section id="portfolio-section" class="text-left">
<div class='container'>
<div class="row">
<div class="col-md-12">
<div class="portfolio">
<div class='container'>
<div class="page-header text-center wow fadeInDown" data-wow-delay="0.4s">
<h2>Portfolio</h2>
<h4>Increasing the accessibility & usefulness of data to decision-makers</h4>
</div>
</div>
<div class="portfolio_content_area">
<div class="portfolio_menu">
<center>
<ul id="filters">
<li class="active_prot_menu"><img src='images/data.png' height='13'> Data Visualisation & Reporting ▪ </li>
<li><img src='images/course.png' height='14'> Coursework ▪ </li>
<li><img src='images/art.png' height='14'> Artwork</li>
</ul>
</center></div>
<div class="portfolio_content" id="portfolio">
<div class='row' id="portfolio">
<div class="col-xs-12 col-sm-4 nopadding">
<div class="pcontainer"><div class="datavis">
<img src="images/1-dv.jpg" alt="Avatar" class="image">
<div class="overlay">
<div class="text"><a href="portfolio/tableau.html" target="_blank"><img src='images/data_white.png' height='17'><h1>LensShift</h1>
<p>Data visualisation of the depth and breadth of the LensShift Taxonomy.<br>By collaborating with my colleagues, I ensure the quality of data is appropriate for effective and creative visualisation.</p></a></details>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-4 nopadding">
<div class="pcontainer"><div class="datavis">
<img src="images/2-siobn.jpg" alt="Avatar" class="image">
<div class="overlay">
<div class="text"><a href="portfolio/SIOBN_Michaelmas17-18_Impact_Report.pdf" target="_blank"><img src='images/data_white.png' height='17'><h1>SIOBN</h1>
<p>Monitoring & evaluating the Social Impact Oxford Business Network's (SIOBN) initiatives. Providing ongoing reporting to stakeholders on the relevance of activities.</p></a></details>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-4 nopadding">
<div class="pcontainer"><div class="course">
<img src="images/3-BSC.jpg" alt="Avatar" class="image">
<div class="overlay">
<div class="text"><a href="portfolio/3-bsc.html" target="_blank"><img src='images/course_white.png' height='21'><h1>Skoll Academy</h1>
<p>Strategic consulting project with Big Society Capital investigating social investment models to address domestic violence in the UK.</p></a></details>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-4 nopadding">
<div class="pcontainer"><div class="course">
<img src="images/4-EY.jpg" alt="Avatar" class="image">
<div class="overlay">
<div class="text"><a href="portfolio/4-EY.html" target="_blank"><img src='images/course_white.png' height='21'><h1>Leadership</h1>
<p>A case study on the motivation and integration of EY's GigNow workforce.</p></a></details>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-4 nopadding">
<div class="pcontainer"><div class="course">
<img src="images/5-MedData.jpg" alt="Avatar" class="image">
<div class="overlay">
<div class="text"><a href="portfolio/5-MedData.html" target="_blank"><img src='images/course_white.png' height='21'><h1>Global Health Challenge</h1>
<p>A case study on using MedData™ to lower the burden of chronic diseases.</p></a></details>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-4 nopadding">
<div class="pcontainer"><div class="art">
<img src="images/6-insta.jpg" alt="Avatar" class="image">
<div class="overlay">
<div class="text"><a href="https://www.instagram.com/joannamakescards_/" target="_blank"><img src='images/art_white.png' height='22'><h1>Art</h1>
<p>Stationery, Design, Lettering</p></a></details>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</center>
</div>
</div>
</div>
</div>
</div>
</section>
jQuery:
$(window).load(function() {
$('.portfolio_menu ul li').click(function(){
$('.portfolio_menu ul li').removeClass('active_prot_menu');
$(this).addClass('active_prot_menu');
});
var $container = $('#portfolio');
$container.isotope({
itemSelector: '.col-sm-4',
layoutMode: 'fitRows'
});
$('#filters').on( 'click', 'a', function() {
var filterValue = $(this).attr('data-filter');
$container.isotope({ filter: filterValue });
return false;
});
});
I'm trying to create a tile layout with bootstrap. Here is the website that I would like to try to copy: link
I kind of achieved this by using columns but using margins and paddings will break them. Aforementioned website uses some kind of script to automatically set their position value (e.g., position:absolute;top:0;left:248px). How is this done?
Here is what I have: jsfiddle
<div class="col-lg-4">
<div class="row">
<div class="col-lg-12 metro-1">
<img src="https://placehold.it/600x600/313236/000000" style="width:100%;">
<div class="top-text-block">
<div class="top-text-block-inner">
check out our<br>hottest winit
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="col-lg-12 metro-2">
<div class="row upper-metro">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<img src="https://placehold.it/300x300/ffffff/000000" style="width:100%;">
<a href="#" class="block-layer">
<div class="block-layer-inner">
</div>
</a>
<div class="bottom-text-block">
<div class="block-name">
Text
</div>
<div class="block-price">
Price
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<img src="https://placehold.it/300x300/23AE8F/000000" style="width:100%;">
<a href="#" class="block-layer">
<div class="block-layer-inner">
</div>
</a>
<div class="bottom-text-block">
<div class="block-name">
Text
</div>
<div class="block-price">
Price
</div>
</div>
</div>
</div>
<div class="row lower-metro">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 lower-metro-inner">
<img src="https://placehold.it/600x300/DEDCE1/000000" style="width:100%;">
<div class="center-text-block">
some text goes here
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="col-lg-12 metro-3">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<div class="col-lg-12">
<img src="https://placehold.it/300x300/5B2988/000000" style="width:100%;">
<a href="#" class="block-layer">
<div class="block-layer-inner">
</div>
</a>
<div class="bottom-text-block">
<div class="block-name">
Text
</div>
<div class="block-price">
Price
</div>
</div>
</div>
<div class="col-lg-12">
<img src="https://placehold.it/300x300/C64001/000000" style="width:100%;">
<a href="#" class="block-layer">
<div class="block-layer-inner">
</div>
</a>
<div class="bottom-text-block">
<div class="block-name">
Text
</div>
<div class="block-price">
Price
</div>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 right-metro">
<img src="https://placehold.it/300x600/017B39/000000" style="width:100%;">
<div class="center-text-block">
some text goes here
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="col-lg-12 metro-4">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<div class="col-lg-12">
<img src="https://placehold.it/300x300/5535B1/000000" style="width:100%;">
<a href="#" class="block-layer">
<div class="block-layer-inner">
</div>
</a>
<div class="bottom-text-block">
<div class="block-name">
Text
</div>
<div class="block-price">
Price
</div>
</div>
</div>
<div class="col-lg-12">
<img src="https://placehold.it/300x300/7EC0BF/000000" style="width:100%;">
<a href="#" class="block-layer">
<div class="block-layer-inner">
</div>
</a>
<div class="bottom-text-block">
<div class="block-name">
Text
</div>
<div class="block-price">
Price
</div>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<div class="col-lg-12">
<img src="https://placehold.it/300x300/E4A706/000000" style="width:100%;">
<a href="#" class="block-layer">
<div class="block-layer-inner">
</div>
</a>
<div class="bottom-text-block">
<div class="block-name">
Text
</div>
<div class="block-price">
Price
</div>
</div>
</div>
<div class="col-lg-12">
<img src="https://placehold.it/300x300/925D63/000000" style="width:100%;">
<a href="#" class="block-layer">
<div class="block-layer-inner">
</div>
</a>
<div class="bottom-text-block">
<div class="block-name">
Text
</div>
<div class="block-price">
Price
</div>
</div>
</div>
</div>
</div>
</div>
</div>
It was called Mansory layout. I didn't know what it was called but now I got it. Funny how things are so easy when you actually know what to search for. Haha!
I my webpage I want background image to be changed each time when mouse hover happens on menu buttons. My code for it is like this
<div class="container-fluid ">
<div id="home-banner-1" class="active-banner">
<div class="main-banner-wrapper">
<img src="images/frontpage_bg.jpg" class="upload">
</div>
<div class="col-md-4 col-sm-6 visible-lg visible-md visible-sm front-text">
<p>Thethe world.</p>
</div>
</div>
<div id="home-banner-2" style="display:none">
<div class="main-banner-wrapper">
<img src="images/frontpage_bg_rigging.jpg" class="upload">
</div>
<div class="col-md-4 col-sm-6 visible-lg visible-md visible-sm front-text">
<p>Thethe world.</p>
</div>
</div>
<div id="home-banner-3" style="display:none">
<div class="main-banner-wrapper">
<img src="images/frontpage_bg-Hatches.jpg" class="upload">
</div>
<div class="col-md-4 col-sm-6 visible-lg visible-md visible-sm front-text">
<p>The around the world.</p>
</div>
</div>
</div>
<!--content-->
<div class="container-fluid">
<div class="main-logo-panel">
<div class="box">
<div class="col-md-12 col-sm-12 ">
<div class="col-md-3 col-sm-3 col-xs-4 main-logo"><img src="images/logo_frontpage.png" class="img-responsive"></div>
<div class="col-md-9 col-sm-9 col-xs-8 main-menu">
<ul class="list-inline home-menu-list">
<li>Rigging</li>
<li>Hatches </li>
<li>Stoppers</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function () {
$(".home-menu-list li a").hover(function () {
var bannerClass = '#home-banner-' + $(this).attr('id');
$('.active-banner').fadeOut();
$('.active-banner').removeClass('active-banner');
$(bannerClass).fadeIn();
$(bannerClass).addClass('active-banner');
});
});
</script>
everything looks okay, Except when the hover happens multiple back ground images fadeIn's not only the required one. Can any one point out what I am doing wrong here?
I think the problem is the animation queue, use .stop() to stop the execution of any previous animations in the queue
$(document).ready(function () {
$(".home-menu-list li a").mouseenter(function () {
var bannerClass = '#home-banner-' + $(this).attr('id');
$('.active-banner').not(bannerClass).stop().fadeOut().removeClass('active-banner');
$(bannerClass).stop().fadeIn().addClass('active-banner');
});
});
Also since you are not doing any operation on mouseleave, use mouseenter event directly instead of using hover
<script type="text/javascript">
$( document ).ready(function() {
$.ajax({
type: "GET",
url: 'http://dbtest.php'
});
});
I have a problem with window.location.reload(), becouse when i click the button "Reload" then everything works. However, I would like to share the "Reload" was performed when you click the "Products". I have tried in various ways to achieve this, however, does not work. Please help. Thanks
<body>
<div>
<img src ="img/logo.jpg" class="produkt logo" />
</div>
<button onclick="window.location.reload()">Reload</button>
<br />
<br />
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-6 margin-top-10">
<div class="row">
<div class="col-md-offset-4 col-sm-offset-4 col-xs-offset-1 col-md-4 col-sm-5 col-xs-11">
<div class="app-button">
<div class="app-button-content">
<img src="img/produkty.png" class="ikona" />
<p class="text-center">Produkty</p>
</div>
</div>
</div>
</div>
HTML:
<div id="products">
<img src ="img/logo.jpg" class="produkt logo" />
</div>
jQuery:
$(document).on('click', '#products > img', function() {
location.reload();
})
You can try
<body>
<div>
<img src ="img/logo.jpg" class="produkt logo" onclick="window.location.reload()" />
</div>
<button onclick="window.location.reload()">Reload</button>
<br />
<br />
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-6 margin-top-10">
<div class="row">
<div class="col-md-offset-4 col-sm-offset-4 col-xs-offset-1 col-md-4 col-sm-5 col-xs-11">
<div class="app-button">
<div class="app-button-content">
<img src="img/produkty.png" class="ikona" />
<p class="text-center">Produkty</p>
</div>
</div>
</div>
</div>