Menu icon Foundation

Designer

My Posts

No Content

My Comments

ReynBargz commented on khaled negm's post 18 days

I know this is an old post but i also been looking for a horizontal accordion. What i did is i just use flex. 
.accordion {
display: flex;
}
.accordion li {
dsplay:flex;
}
 

ReynBargz commented on khaled negm's post 18 days

I know this is an old post but i also been looking for a horizontal accordion. What i did is i just use flex. 
.accordion {
display: flex;
}
.accordion li {
dsplay:flex;
}
 

ReynBargz commented on Kumi Festus's post 5 months

To Answer this old post. see below


<ul class="tabs" data-tab>
<li class="tab-title active"><a href="#panel1">Tab 1</a></li>
<li class="tab-title"><a href="#panel2">Tab 2</a></li>
<li class="tab-title"><a href="#panel3">Tab 3</a></li>
<li class="tab-title"><a href="#panel4">Tab 4</a></li>
</ul>
<div class="tabs-content procedures-sections">
<div class="content active" id="panel1">
<p>This is the first panel of the basic tab example. You can place all sorts of content here including a grid.</p>
</div>
<div class="content" id="panel2">
<p>This is the second panel of the basic tab example. This is the second panel of the basic tab example.</p>
</div>
<div class="content" id="panel3">
<p>This is the third panel of the basic tab example. This is the third panel of the basic tab example.</p>
</div>
<div class="content" id="panel4">
<p>This is the fourth panel of the basic tab example. This is the fourth panel of the basic tab example.</p>
</div>
</div>

Add this script
 
$('.tabs-title').on("mouseover", function() {
        var $this = this;
        var tab_id = $($this).find('a').attr('href');
        $(".procedures-sections .tabs-panel").siblings().hide();
        $(".procedures-sections .tabs-panel"+tab_id).show();
});

ReynBargz commented on Glenn Philp's post about 2 years

 Hi, i need your expertise. I have a button on homepage. I want it to open a modal inside a subpage. Is this possible?

ReynBargz commented on Joudicek Jouda's post about 2 years

If you want the slick slider to become a full width background slider something like vegas.
on  slider.css go to line 2 .slick-slider and add the below. Replace the position relative to absolute
position: absolute !important; width: 100%; z-index: -1;
on your html 
<div class="slider">
<div class="a-slide slide1"></div>
<div class="a-slide slide2"></div>
</div>
 add this css on your main style. 
.a-slide{ height: 100%; width: 100%; background-size: cover !important;}
.slick-slider{ height: 100%;}
.slide1 {background:url(../img/slider01.png) no-repeat center;}
.slide2 {background:url(../img/slider01.png) no-repeat center;}
 
Should be something like this. I hope this helps : )
<!DOCTYPE html>
<html>
<head>
<title>My Cover Slider</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="./slick/slick.css">
<link rel="stylesheet" type="text/css" href="./slick/slick-theme.css">

<style type="text/css">
.a-slide{ height: 100%; width: 100%; background-size: cover !important;}
.slick-slider{ height: 100%;}
.slide1 {background:url(../img/slider01.png) no-repeat center;}
.slide2 {background:url(../img/slider01.png) no-repeat center;}
</style>

</head>
<body>

<div class="slider">
<div class="a-slide slide1"></div>
<div class="a-slide slide2"></div>
</div>

<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
<script src="./slick/slick.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$('.slider').slick({
slidesToShow: 1,

autoplay: true,
autoplaySpeed: 5000,
dots: true,
infinite: true,

speed: 300,
fade: true,

});
</script>

</body>
</html>
 
slick site: http://kenwheeler.github.io/slick/
 

Posts Followed





Following

    No Content

Followers

My Posts

No Content

My Comments

You commented on khaled negm's post 18 days

I know this is an old post but i also been looking for a horizontal accordion. What i did is i just use flex. 
.accordion {
display: flex;
}
.accordion li {
dsplay:flex;
}
 

You commented on khaled negm's post 18 days

I know this is an old post but i also been looking for a horizontal accordion. What i did is i just use flex. 
.accordion {
display: flex;
}
.accordion li {
dsplay:flex;
}
 

You commented on Kumi Festus's post 5 months

To Answer this old post. see below


<ul class="tabs" data-tab>
<li class="tab-title active"><a href="#panel1">Tab 1</a></li>
<li class="tab-title"><a href="#panel2">Tab 2</a></li>
<li class="tab-title"><a href="#panel3">Tab 3</a></li>
<li class="tab-title"><a href="#panel4">Tab 4</a></li>
</ul>
<div class="tabs-content procedures-sections">
<div class="content active" id="panel1">
<p>This is the first panel of the basic tab example. You can place all sorts of content here including a grid.</p>
</div>
<div class="content" id="panel2">
<p>This is the second panel of the basic tab example. This is the second panel of the basic tab example.</p>
</div>
<div class="content" id="panel3">
<p>This is the third panel of the basic tab example. This is the third panel of the basic tab example.</p>
</div>
<div class="content" id="panel4">
<p>This is the fourth panel of the basic tab example. This is the fourth panel of the basic tab example.</p>
</div>
</div>

Add this script
 
$('.tabs-title').on("mouseover", function() {
        var $this = this;
        var tab_id = $($this).find('a').attr('href');
        $(".procedures-sections .tabs-panel").siblings().hide();
        $(".procedures-sections .tabs-panel"+tab_id).show();
});

You commented on Glenn Philp's post about 2 years

 Hi, i need your expertise. I have a button on homepage. I want it to open a modal inside a subpage. Is this possible?

You commented on Joudicek Jouda's post about 2 years

If you want the slick slider to become a full width background slider something like vegas.
on  slider.css go to line 2 .slick-slider and add the below. Replace the position relative to absolute
position: absolute !important; width: 100%; z-index: -1;
on your html 
<div class="slider">
<div class="a-slide slide1"></div>
<div class="a-slide slide2"></div>
</div>
 add this css on your main style. 
.a-slide{ height: 100%; width: 100%; background-size: cover !important;}
.slick-slider{ height: 100%;}
.slide1 {background:url(../img/slider01.png) no-repeat center;}
.slide2 {background:url(../img/slider01.png) no-repeat center;}
 
Should be something like this. I hope this helps : )
<!DOCTYPE html>
<html>
<head>
<title>My Cover Slider</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="./slick/slick.css">
<link rel="stylesheet" type="text/css" href="./slick/slick-theme.css">

<style type="text/css">
.a-slide{ height: 100%; width: 100%; background-size: cover !important;}
.slick-slider{ height: 100%;}
.slide1 {background:url(../img/slider01.png) no-repeat center;}
.slide2 {background:url(../img/slider01.png) no-repeat center;}
</style>

</head>
<body>

<div class="slider">
<div class="a-slide slide1"></div>
<div class="a-slide slide2"></div>
</div>

<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
<script src="./slick/slick.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$('.slider').slick({
slidesToShow: 1,

autoplay: true,
autoplaySpeed: 5000,
dots: true,
infinite: true,

speed: 300,
fade: true,

});
</script>

</body>
</html>
 
slick site: http://kenwheeler.github.io/slick/
 

Posts Followed

Following

  • No Content

Followers

  • No Content