I'm trying to make an FAQ page using an accordion. In some of the answers I tried to make a clickable link, that will direct you to another question (I don't want the page to refresh).
With what I have now, the opened question (containing the link) will close the accordion after clicking, and open the desired accordion. The only thing missing is that the page will not scroll to the new question.
What I've got:
function openQuestion(q) {
jQuery('.accordion-toggle').removeClass('active');
jQuery('.accordion-container').fadeOut(500);
var accordions = jQuery('.accordion-toggle');
var accordion = accordions[q - 1];
jQuery(accordion).addClass('active');
jQuery(accordion).next('.accordion-container').slideToggle(500);
}
I assume the next jquery line would contain something with scrollIntoView. But no succes yet.
This is what I use in HTML
text
<div class="entry">
<h3>FAQ</h3>
<p>...</p>
<div class="clear"></div>
<div class="accordion wrapper">
<h3 class="accordion toggle active">
...
</h3>
<div class="accordion-container" style="display: block;">
<div class="content-block">
<span style="font-weight: 400;">...</span>
</div>
</div>
<!-- end accordion container -->
<h3 class="accordion toggle">...</h3>
<div class="accordion-container" style="display: none;">...</div>
<!-- end accordion container -->
</div>
</div>
Related
I have a counter in my html code. I want to align this counter in the middle of the site. There is a helper class, called text-align which works with almost all objects on the site but i don't know how to align a script entry.
My code looks like this:
<section class="wow fadeIn">
<div class="container-fluid full-screen position-relative no-padding no-transition" >
<div class="opacity-medium bg-white"></div>
<div id="animated-balls"></div>
<div class="slider-typography xs-position-inherit">
<div class="slider-text-middle-main">
<div class="slider-text-top slider-text-middle2">
<!-- logo -->
<div class="coming-soon-logo"><img class="logo-style-2" src="images/offene-stadt.png" alt=""/></div>
<!-- end logo -->
<span class="coming-soon-title text-uppercase gray-text margin-ten no-margin-lr no-margin-bottom">We're getting ready to launch</span>
<!-- time -->
<div id="counter-underconstruction2" class="white-text text-center margin-two no-margin-lr no-margin-bottom"></div>
<div id="countdown-target" class="text-center"></div>
<script>
var myCountdown1 = new Countdown({time:86400*20});
</script>
</div>
<!-- end time -->
You can set a target to point it at a specific item so try this:
<div class="slider-text-top slider-text-middle2">
<!-- logo -->
<div class="coming-soon-logo"><img class="logo-style-2" src="images/logo-light-big.png" alt=""/></div>
<!-- end logo -->
<span class="coming-soon-title text-uppercase gray-text margin-ten no-margin-lr no-margin-bottom">We're getting ready to launch</span>
<!-- time -->
<div id="counter-underconstruction2" class="white-text text-center margin-two no-margin-lr no-margin-bottom"></div>
<i class="icon-anchor medium-icon"></i>
<div id="countdownTarget" class="center-block"></div>
<script>
var myCountdown1 = new Countdown({time:316, target: "countdownTarget"});
</script>
<!-- end time -->
</div>
And then use your existing text-align technique on the #countdownTarget to position it how you like.
I am trying to create an application using bootstrap and angularjs as practice and a simplified version of my application is illustrated in this pen: http://codepen.io/megadeen/pen/ZWrGmv
This is the main code:
<table class="main" ng-app="app" ng-controller="main">
<tr>
<td class="sidebar">
<!-- Set page using AngularJS -->
<a ng-click="page = 'fpage'">First Page</a>
<br>
<a ng-click="page = 'spage'">Second Page</a>
</td>
<td class="content">
<!-- First Page -->
<div class="fpage" ng-show="page == 'fpage'">
<div class="col-md-5">
.... Content ....
</div>
</div>
</div>
<!-- Second Page -->
<div class="spage" ng-show="page == 'spage'">
<div class="row">
<div class="col-md-7">
.... Content ....
</div>
</div>
</td>
</tr>
</table>
However, there's always this stray horizontal scrollbar that won't go away. This stray scrollbar only appears in the second and subsequent pages.
I tried adding the row class to the fpage and spage divs. However, if I do so, then the scrollbar appears in all pages.
Why does this happen and how do I correct this problem?
You should use col-md-12 instead of row.
I am trying to get the slider to work here and think I have the code but something isn't working right. It is only showing the image in the CSS and not rotating through the other ones.
Script in Header:
var images=new Array('/images/home/AC-InStock-Rotating.jpg', '/images/home/AC- MXV-Rotating.jpg', '/images/home/AC-Rental-Rotating.jpg');
var nextimage=0;
doSlideshow();
function doSlideshow(){
if(nextimage>=images.length){nextimage=0;}
$('.home-middle-part')
.css('background-image','url("'+images[nextimage++]+'")')
.fadeIn(500,function(){
setTimeout(doSlideshow,1000);
});
}
Body:
<div class="home-middle-part">
<div class="container clearfix">
<div class="grid_12 omega" >
<div class="grid_6 omega" >
<div style="padding-left: 10px;">
</div>
</div> <!-- end of grid 6-->
<div class="grid_6 omega" >
<div>
<table>
</table>
</div>
</div> <!-- end of grid 6-->
</div> <!-- end of grid 12 -->
</div> <!-- end of container clearfix -->
</div> <!-- end of home-middle-part -->
CSS
.home-middle-part {
background-image: url("/images/home/body-image banner1.jpg");
background-repeat: no-repeat;
}
You script in the header is running before the browser knows that .home-middle-part exists. You need doSlideshow(); to run after the HTML has been parsed. You can do this by moving your script tag the bottom of the page or you can wrap your call to doSlideshow() in $(document).ready() like so:
$(document).ready(function() {
doSlideshow();
});
I have a tabbed toggle statistic page, which has 10 separate tabs that include charts. By clicking each tab, preloaded corresponding chart is being showed up. However, it does not scale into its container. More weird thing is, when I resize the window, visible chart is shown properly (I suppose it does some recalculation thingy). How should I modify my code so that it does that recalculation thingy after a click, or any suggestions on the problem?
Here is my jsfiddle:
http://jsfiddle.net/g66ut7c6/
<!--BEGIN TABS-->
<div class="tabbable tabbable-custom">
<ul class="nav nav-tabs">
<li>
<a href="#tab_1_1" data-toggle="tab">
1
</a>
</li>
<li>
<a href="#tab_1_2" data-toggle="tab">
2
</a>
</li>
<li>
<a href="#tab_1_3" data-toggle="tab">
3
</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="tab_1_1">
<div class="scroller">
<div class="col-md-6 col-md-offset-3">
<div class="portlet light">
<p> Piechart by ülkeler </p>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="tab_1_2">
<div class="scroller">
<div class="col-md-6 col-md-offset-3">
<div class="portlet light">
<p> Piechart by step dağılımı </p>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="tab_1_3">
<div class="scroller">
<div class="col-md-6 col-md-offset-3">
<div class="portlet light">
<p> Piechart by hasta sayısı ay </p>
</div>
</div>
</div>
</div>
</div>
</div>
<!--END TABS-->
Before resize
After a resize, the size is okay
I could not include charts in my jsfiddle because they contain some ruby code.
PS: Using Chartkick and Google Charts to draw charts, and MetronicJS for tabs.
Edit: The first chart that is visible by default is being display properly initially, however others are not. After a resize of a window when another chart is visible, the previous one gets broken again.
You can programmatically fire the 'resize' event:
window.dispatchEvent(new Event('resize'));
Just attach it to the 'click' event that shows the tab.
In your case:
$('div.tabbable > ul > li > a').click( function() {
window.dispatchEvent(new Event('resize'));
});
If your component doesn't resize as respond to the event, you could actually resize the window with:
window.resizeTo(width, height);
UPDATE:
If it is not posible to resize the window (see comments) you could try to redraw the chart when the tab becomes visible. Maybe in that way the chart is able to calculate properly the dimensions it needs to fit in. Something like:
$( 'div.tabbable > ul > li > a' ).click( function() {
myChart.draw( myData );
});
Hope it helps!
I have 4 image links that when clicked need to show a specific DIV. Then when another of the remaining 3 images is clicked, its DIV shows whilst hiding the last DIV. I have tried several different ways and can't seem to get it going the way I need. The four DIVs occupy the same space on the page. Can anyone help?
Here is how I have set up the HTML so far:
<div id="content">
<div id="info">
<img src="../Images/yellowbutton.png" class="infolink" />
<img src="../Images/redbutton.png" class="infolink"/>
<img src="../Images/greenbutton.png" class="infolink" />
<img src="../Images/bluebutton.png" class="infolink"/>
<div id="level0">This is the home page for the levels</div>
<div id="level1">this is the information on level 1</div>
<div id="level2">this is the information on level 2</div>
<div id="level3">this is the information on level 3</div>
<div id="level4">this is the information on level 4</div>
</div>
</div>
You can change the visibility of the divs using css and javascript
The following code performs the desired behaviour, (if I understood it correctly :-)):
<html>
<head>
<script>
function selectItem(item) {
var availableItems = document.getElementsByClassName("itemToShow");
for (var i=0;i<availableItems.length;i++) {
if (availableItems[i].id == item) {
availableItems[i].style.display = "block";
} else {
availableItems[i].style.display = "none";
}
}
}
</script>
</head>
<body>
<div id="content">
<div id="info">
<img src="../Images/yellowbutton.png" class="infolink" />
<img src="../Images/redbutton.png" class="infolink"/>
<img src="../Images/greenbutton.png" class="infolink" />
<img src="../Images/bluebutton.png" class="infolink"/>
<div id="level0">This is the home page for the levels</div>
<div id="level1" class="itemToShow">this is the information on level 1</div>
<div id="level2" style="display:none;" class="itemToShow">this is the information on level 2</div>
<div id="level3" style="display:none;" class="itemToShow">this is the information on level 3</div>
<div id="level4" style="display:none;" class="itemToShow">this is the information on level 4</div>
</div>
</div>
</html>
The basic idea is call a javascript function when the anchor is clicked, passing the id of the DIV that must be shown.
Then, on the javascript funcion, select the DIVs by css class (itemToShow). For each DIV selected, set style="display:block" if its id is equal to the informed one or style="display:none" otherwise.