I am trying to create a team page for website.
A picture of each member is laid out in a "grid" type of view. There are two boxes below this grid with some content.
Box 1: Basic div with some text.
Box 2: Div with some sample % or value based bars.
When a website visitor click on a team members picture, the boxes will get populated with information about that member.
Box 1: Description about the person and maybe some links.
Box 2: The data in the bars will change to values that represent the skills the member has.
Can this be done in any way other than: pagify.js?
EDIT*** (16 Aug 2013)
The first part of my question is sovled.
For the second box, I wanted to make a animated skill bar like the ones here http://www.alessioatzeni.com/blog/css3-skill-bar-animation/
How can i update these dynamically?
EDIT*** (17 Aug 2013)
I managed to implement this features :). Thanks.
Thanks
Javascript/jQuery onClick show and hide events should do what you want.
http://www.w3schools.com/jquery/jquery_hide_show.asp - basics
http://www.mkyong.com/jquery/jquery-show-and-hide-example/ - workinging example
http://www.goldensearch.net/content/tutorials/show-hidden-content-with-javascript.php - pure javascript :-)
If this isn't what you're looking for we (or at least I) will need more detail in the question.
Of course you could use AJAX to achieve this behaviour but as long as we're not talking about thousands of team members, a simpler but yet powerful solution is to hide all detailed information and only show them for an active member the user clicked on.
Update: (Working version on JsFiddle [http://jsfiddle.net/9kfKw/])
HTML (Example)
<ul id="members">
<li>Member 1</li>
<li>Member 2</li>
</ul>
<div id="details">
<div>
<div class="left">
<p>Some Info about Member 1</p>
</div>
<div class="right">
<p>Some more Info Member 1..</p>
</div>
</div>
<div>
<div class="left">
<p>Some Info about Member 2</p>
</div>
<div class="right">
<p>Some more Info about Member2..</p>
</div>
</div>
</div>
JavaScript
$(function() {
$('#members li').click(function() {
var index = $(this).index();
$('#details > div').hide().eq(index).show();
});
});
Demo
Find a working version on JsFiddle (http://jsfiddle.net/9kfKw/)
Related
The problems: (dont mind the upper section)
When I click a checkbox the result of the other checkbox also display and it also seems to be adding a margin at the bottom because the popup is moving down.
Second I cant seem to find a way find a way to display the 2 sections side by side.
Is there a way that I could make it that only one checkbox per section can be selected? And if the use changes their mind and click a different checkbox it will also change the displayed result.
heres the codepen link:
https://codepen.io/racrdvz/pen/RwWZrog
<div class="pickerSection">
<section>
<div class="watchingFor">
<p class="type">Watching for:</p>
<div class="menuToggle">
<div class="menuToggleBtn"><img src="https://i.imgur.com/Id2MrBQ.png" alt="" id="watchfor-btn" class="menuBtn"> </div>
<div class="menuToggleBtn">
<span class='display beginner'>30 days</span>
<span class='display intermediate'>60 days</span>
<span class='display advanced'>90 days</span>
</div>
</div>
</div>
</div>
</section>
heres the look im going for:
Forgive me for the multiple questions, any help and suggestion will be much appriciated. Thanks
the solution to point 1 - use the different name of id and class for checkboxes
the solution to point 2 - USe row and col classes to get them in the same row
To improve my jquery skills I am working on an online crossword type game.
I will insert an id, such as d-1 for down 1 or a-5 for across 5 in the appropriate square.
I would like to use jquery to set the focus to the next appropriate square after the user types in a letter; for example if they type in foo, starting at the top right, the word FOO would appear going down the right column.
I have spent a long time to accomplish this with no success.
Below is some sample code with the id hardcoded (though finding the next across id would probably be different than the next down id)
Thanks for any help.
Jsfiddle
HTML
<div class="live-cw-css-table-tr">
<div class="live-cw-css-table-td" id="a-1"contenteditable></div>
<div class="live-cw-css-table-td" id="a-1" contenteditable></div>
<div class="live-cw-css-table-td contenteditable" id="d-1 a-1" contenteditable></div>
</div>
<div class="live-cw-css-table-tr">
<div class="live-cw-css-table-td live-cw-css-nb"></div>
<div class="live-cw-css-table-td live-cw-css-nb" id="d-1" contenteditable></div>
<div class="live-cw-css-table-td " id="d-1" contenteditable></div>
</div>
</div>
jquery
$('.live-cw-css-table-td').on('input',function(e){
if ($(this).text().length > 1) {
$(this).next().find('#d-1').focus();
}
});
I am using a magento template which uses jquery.tabs.min.js for displaying different product information in different tabs.
Now I would like to send customers mails with a direct link to the review form, which is at the end of the third tab.
Unfortunatly the page if called from outside always opens with the first tab open.
So sending links with an additional hash from the tab id does not work.
I have already looked around many similiar threads but unfortunatly I am not very familiar with javascript, and I would need a realy detailed help, how to work this out and espacialy where to put the different snippets (i.e. inside the html of the page or in the js-file).
Something thar makes it maby more difficult is, that it would be helpful to not only open the third tab, but as well scroll down to the "review form" which is inside the third tab, at the bottom, and if there are more than a few reviews the visitor would not see the review directly.
So here is the html snippet, which represents my pages structure
<div id="product-tabs" class="gen-tabs gen-tabs-style-f">
<ul class="tabs clearer">
<li id="tab-description"><a class="current" href="#">Beschreibung</a></li>
<li id="tab-additional">Zusatzinformation</li>
<li id="tab-tabreviews">Bewertungen</li>
<li id="tab-product.tags">Schlagworte</li>
</ul>
<div class="tabs-panels">
<h2 class="acctab" id="acctab-description">Beschreibung</h2>
<div class="panel"> <h2>Details</h2>
CONTENT
</div>
<h2 class="acctab" id="acctab-additional">Zusatzinformation</h2>
<div class="panel"> <h2>Zusatzinformation</h2>
CONTENT
</div>
<h2 class="acctab" id="acctab-tabreviews">Bewertungen</h2><div class="panel">
<div class="box-collateral box-reviews" id="customer-reviews">
CONTENT OF CUSTOMER REVIEWS
<div class="form-add">
<h2>Schreiben Sie Ihre eigene Kundenmeinung</h2>
<form action="http://www.mydomain.com/review/product/post/id/8/" method="post" id="review-form">
-->>HERE IS MY REVIEW FORM<<--
</div>
</div>
<h2 class="acctab" id="acctab-product.tags">Schlagworte</h2><div class="panel">
<div class="box-collateral box-tags"> <h2>Schlagworte</h2>
CONTENT
</div>
</div>
Thanks a lot for any help in advance.
Update:
Maybe it is possible to extend the already existing function which routes the visitor "on click" directly to the review form, to work as well, depending on a parameter given with the URL (ie. a hashtag) ? Here is the peace of code from the template:
<?php //Open the "Reviews" tab, when "X Review(s)" or "Be the first to review this product" links are clicked ?>
<script type="text/javascript">
//<![CDATA[
jQuery(function($){$("#goto-reviews, #goto-reviews-form").click(function(){if($("#product-tabs").hasClass("accor")){$("#product-tabs .tabs-panels").data("tabs").click($(".tabs-panels .acctab").index($("#acctab-tabreviews")))}else{$("#product-tabs .tabs").data("tabs").click($("#tab-tabreviews").index())}})});
//]]>
</script>
If anybody could help me with that? Should be somehow easy if one have skills in JS ;-)
Have you tried adding the ID of the tab to the query string?
Http://www.mysite.com/product-URL.html#acctab-tabreviews
Adding the I'd portion of the li element with a hash should work
I have 11 elements with long description of each element of them. I decided to display the elements on the sidebar and the description of each one of them will be displayed on the body directly when the user clicks on the element.
I came with a solution similar to this ONE
but the problem with this one is put the content (or description) inside the javascript code, and I want the description be on the HTML code to make it later on flexible for changes by the admin after putting the data including the description of these elements on the database instead of hard-coded style.
Therefore, how can I do that?
You can try this way
<div id="menu">
<ul>
<li id="a">item a
<div id="contentA" style="display:none">Description of item A</div>
</li>
<li id="b">item b
<div id="contentB" style="display:none">Description of item A</div>
</li>
</ul>
</div>
<div id="content"></div>
<script type="text/javascrip">
$(document).ready( function () {
$('#a').click(function() {
$('#content').html($('#contentA').html());
});
$('#b').click(function() {
$('#content').html($('#contentB').html());
});
});
<script>
I updated your example, it now uses hidden divs inside the clickable menu items, and on li click it finds the menu description and displays it.
This method does not depend on ids and degrades more gracefully (except if the client doesn't support JS but supports CSS display).
Your description is a bit unprecise, but if I get it right your could use IDs for the description text and fade them in/out with jQuery.
http://jsfiddle.net/PajFP/14/ (updated)
I am trying to have tooltip for my personal website http://www.stacked.in. when I move the mouse on the link, I want to have tooltip displayed. Tooltip display content is already available inside the html page as a div element, but it is hidden. I want the tool-tip to be displayed only when I move the mouse over the link. I use jquery and jquery plug-in
http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/ for this purpose. Even if I get the some other jquery-plugin, I would be happy.
Please note that tooltip-content div inner html would not shown. Tooltip supposed to get the element and display it.
#tooltip-content {
display:none;
width:250px;
}
here is HTML code..
<div id="widget" class="span-8 " >
<h2>Example.com</h2>
<ul>
<li><h3>Example News 1</h3>
<div id="tooltip-content">
<div class="published">Thu Jul 8, 2010</div>
<div class="content">
This detail news 1 shown only on tooltip..
</div>
</div>
</li>
<li><h3>Example News 2</h3>
<div id="tooltip-content">
<div class="published">Thu Jul 8, 2010</div>
<div class="content">
This detail news 2 shown only on tooltip..
</div>
</div>
</li>
</ul>
There would be more than 100 elements requires tooltip. Any better tool or way to handle this problem? If you give me the code sample, I would be greatful to you.. I already searched so many ways of doing it. http://code.google.com/p/jquery-very-simple-tooltip/ comes near to solution but it requires initialization for all the tooltip notes.
I've found jQuery Tools from http://flowplayer.org/tools/tooltip/index.html to have an excellent tooltip. You can use either a title attribute on the element, or use the next DOM node as the tooltip for a non-titled element.
Very flexible, and I'm sure it'll suit your needs appropriately. Good luck!