I can't seem to work out how to get my first accordion panel to open automatically. Problem is, I can't set it to active as it is displaying data with PHP from a database so if I set the div to "active-panel" it applies it to all the panels. Any help would be great! Just to clarify, I'm just trying to get the first one to open automatically. Code:
$('.panel-holder').click(function () {
$(this).closest('.accordion').find('.panel-holder').removeClass('active-panel');
$(this).addClass('active-panel');
PHP
echo "<div class='panel-holder'>
<div class='panel-title'>". $results['job_title'] ."
<i class='icon arrow_carrot-down'></i>
</div>
<div class='panel-content'>
<p class='lead'>". $results['job_summary'] ."</p>
<p>". $results['job_description'] ."</p>
</div>
</div><!--end of individual accordian panel-->";
Just add the "active-panel" class to the first item in PHP only. Are those generated in a loop? Just create a counter variable that increases in every run of the loop. If this counter == 1 (or 0 if you want to start with 0 ;) ) add the css class to your markup.
Ended up creating the following solution:
$('.panel-holder').each(function () {
$(this).closest('.accordion').find('.panel-holder:first').addClass('active-panel');
});
Related
I am trying to use a Show More/Show Less button for texts to expand and contract the long texts/paragraphs. The code seems to work fine in all aspect. The one and only flaw is that I can still see the show more button even if the text is limited (say only 1 line). How can I set a condition for the button to only appear if a certain number of lines or text has been displayed (say 3 lines or 50 words or any such possible limitation). I am not being able to figure out how to do it as I am not that good in jQuery. Hence, I am here seeking a solution.
Codepen: [ https://codepen.io/zoomkraft/pen/ZEELQXL ][1]
In the sample above, try eradicating the paragraph limiting it to 1 or 2 line only. The show more button still shows when its not needed as there is not much text for expansion. The should be hidden for such limited texts.
[1]: https://codepen.io/zoomkraft/pen/ZEELQXL
UPDATED
HTML comes within while loop.
<?php while($content = $contents->fetch()){ ?>
<div class="text-container">
<div class="content hideContent">
<p><?php echo $content['uc_desc']; ?></p>
</div>
<div class="show-more">
<span>Show more</span>
</div>
</div>
<?php } ?>
I got the solution to why its not working in while loop.
Removed this
var lengthofContent = $(".content").text();
console.log(lengthofContent.length);
if(lengthofContent.length < 200){
$(this).find(".show-more").hide();
}
and added this
$('.content').each(function(k,v){
if ($(v).text().length < 200) {
$(v).removeClass('hideContent');
$(v).next().hide();
}
});
Can you add another class to the show option. Like this
<div class="show-more show-option">
<span>Show more</span>
</div>
then add the following in the script tag directly.
$('.content').each(function(key,value){
var lengthofContent = $(value).text();
if(lengthofContent.length < 200)
$(value).siblings('show-option').hide();
});
The value of 200 can be configured best based on the number you want.
I am working on a website in which I want to hide next and previous buttons when there is only one image on the carousel and show next and previous buttons when there are multiple images.
The php code which I have used which I have used in order to rendered multiple images at the front end are:
<div class="col-9 text-center border-right px-0">
<div id="owl_item_images" class="owl-carousel owl-theme">
<?php
if(isset($data['item']->gallery))
{
foreach ($data['item']->gallery as $gallery)
{
echo '<div class="item">
<div class="item_image_wrapper mx-auto">
<img class="item_images_carousel" src="'.$gallery->url.'">
</div>
</div>';
//'.$gallery->url.';
}
}
?>
</div>
</div>
Problem Statement:
I am wondering what carousel code I need to add so that next and previous buttons show up when there are multiple images, and no next and previous buttons show up when there is single image.
What I have tried:
<script>$('#owl_item_images').owlCarousel({nav : false});</script> By using that, all images get visible (with images lining up side by side) inside the carousel.
I also tried with the following code:
$('#owl_item_images').trigger('change.owl.carousel', { nav: true }); but it didn't work as well.
Not tried it but this should do the trick:
if(size($data['item']->gallery)<=1)
{
echo "<script>
$(function(){
$('#owl_item_images').owlCarousel({nav : false});
});
</script>";
}
put this after foreach loop
If I am not missing something, what you asked for is pretty much out of the box.
if you set nav:true owl.carousel itself will show navigation if there is more than one item, and no navigation if there is only one item, as seen in that pen:
https://codepen.io/optionsit/pen/BPGzvV
what version of owl.carousel are you using? and do you have anymore markup in your carousel?
You can count the number of images in the carousel using jQuery. Then, only show the nav if there is more than one image.
Try this:
<script>
var imageCount = $('#owl_item_images .item_images_carousel').length;
var showNav = false;
if (imageCount > 1) showNav = true;
$('#owl_item_images').owlCarousel({nav : showNav});
</script>
Really struggling to think of a solution to this problem. I have thought anchor links might help (using the #example on the end of a link to scroll to a position on the page) but not sure how best to implement them.
So on the homepage of my site I have a list of links, that correlate to tabs on another page.
The links on the homepage:
(What is e-Bate, What are rebates etc.)
Links
When you click one of the tabs on the other page, it activates a script which shows a certain div below:
Tabs
This is how the tabs are shown:
HTML:
<div class="page-links">
<ul>
<li>What is e-Bate?</li>
<li>What are rebates?</li>
<li>e-Bate features</li>
<li>How e-Bate works</li>
<li>Case studies</li>
</ul>
</div>
<div class="page-contents">
<div id="whatebate" class="hideshowdiv">
<?php echo CFS()->get('whatisebate'); ?>
</div>
<div id="whatrebate" class="hideshowdiv">
<?php echo CFS()->get('what_are_rebates'); ?>
</div>
<div id="ebatefeat" class="hideshowdiv">
<?php echo CFS()->get('e_bate_features'); ?>
</div>
<div id="howebate" class="hideshowdiv">
<?php echo CFS()->get('how_e_bate_works'); ?>
</div>
<div id="casestud" class="hideshowdiv">
<?php echo CFS()->get('case_studies'); ?>
</div>
</div>
jQuery:
jQuery(document).ready(function() {
jQuery(".page-contents div.hideshowdiv").hide();
// Show chosen div, and hide all others
jQuery("a").click(function (e)
{
//e.preventDefault();
jQuery("#" + jQuery(this).attr("class")).fadeIn().siblings('div.hideshowdiv').hide();
});
});
So when one of the links is clicked on the homepage, for instance, the 'What is e-Bate?' link, I want it to go to the other page, and click the corresponding tab, showing the content for that section. Is this possible? Thanks in advance.
This is very possible and you had half the equation with the anchors. Now you just need to write a small function to parse out the URL and check for a certain tag.
So something like this:
$(function(){
if (location.href.indexOf("#example") != -1) {
//This is where you put your function to show the tab
}
if (location.href.indexOf("#anotherexample") != -1) {
//This is where you put your function to show the tab
}
})
Well, if you can use PHP, then it is indeed pretty easy:
First, you need to create a PHP file, obvious with an input parameter, preference, two GET variables, the first one being the link of the page you want to visit and the second one can be, well that depends on how you want it to be, it can be a div id, or a div class or pretty much id of anything you want to click on the second site (You MUST KNOW which button/link you want to click on the second site)
Then first in your php code, store these two things into variables, Let us take $Path and $DivToClick,
Now, use this PHP function:
file_get_contents(path,include_path,context,start,max_length)
Here, the path is an required field, rest is all optional.. and then after that, echo a JQuery code which will do something like this
function ClickTheButton ()
{
$('#divId').click ();
}
Now, let me explain what we are doing here... First, you are sending link to a php script that get all the contents of that webpage and display it on my screen, and then when you are echo-ing the JQuery code, you are telling browser, that yes, this is the part of the page, execute it and simulate the action of click on this page, and thus the click action is simulated and things are done as per your need...
Hope this helps... :)
I have the following code:
<a class="button" href="javascript:ShowHide('elaborate_1')" style="font-size:24px; padding:0 10px; margin-left:10px;">COLLAPSE</a>
<div id="elaborate_1" class="expandable-box" style="display:none;">
<div class="description"><?php //USE THIS CLASS 'description' ON A 'div' TAG FOR A GRAY BOX TO DISPLAY CONTENT ?>
<p class="nomargin nopadding">HELLO</p>
</div><!-- .descpription -->
</div>
The web page currently hides this message "hello" until I click "COLLAPSE" however I want the content to be shown automatically until I click "collapse.
How can I do this?
Change the display:none to display:block on your elaborate_1 div.
Remove the display:none from the containing element:
<div id="elaborate_1" class="expandable-box">
If your ShowHide function is correct, it should work just like that. If not, you should post the code from the function.
Just remove style="display:none;" from your html element
and add following code to your js function (for reference)
document.getElementById("elaborate_1").style.display = "block";
Personally I would suggest taking a look at JQuery. It allows you to take advantage of controlling various effects, like show, hide, toggle, fade, and custom animation, etc. Here is the link: http://api.jquery.com/category/effects/ which might be useful to you.
A little Jquery sample code:
$('a.button').click(function(){
$('#elaborate_1').toggle("slow");
});
<!-- start menu area -->
<div id="menu" class="editable">
<div id="button1" class="repeatable">Section 1</div>
<div id="button2" class="repeatable">Section 2</div>
<div id="button3" class="repeatable">Section 3</div>
</div>
<!-- end menu area -->
I don't want to give every single button on each page it's own class. I want to use jQuery, PHP, JavaScript or whatever it takes to get it working without having to go through every single button and give it it's own class.
Also, please note I'm not using navigation bars here, I'm using only divs. Every solution I find uses navigation bars and I can't get them to work when using only divs and hyperlinks.
I want to hightlight the button, or colour it etc.. which matches the current active page.
Try something like this using jQuery:
$(document).ready(function(){
$('#menu div.repeatable a').each(function(){
if(document.URL.indexOf($(this).attr('href')) !== -1){
$(this).addClass('selected');
}
});
});
Add .selected to your CSS and style it as needed.
This will loop through the menu items and compare the url in the href attribute to the current active page url.
You can also use the divs inside #menu :
$(document).ready(function(){
$('#menu div.repeatable').each(function(){
if(document.URL.indexOf($(this).find('a').attr('href')) !== -1){
$(this).addClass('selected');
}
});
});
<div id="menu" class="editable">
<?php
$i = 0;
while($i < 10)
{
echo '<div id="button'.$i.'" class="repeatable">Section '.$i.'</div>';
$i++;
}
?>
</div>
Read up on loops
Use the jQuery selectors and .each function. I have done something similar here jQuery.attr('src') replace not working in FF.
You could use a similar script to search for every , check the href value and if it fits you, do something with the div... Like adding a style attribute inline, like style="color: #FF0000;" to make the text red or whatever you want/need.