I've looked around for about a week or so now trying various techniques but so far no luck.
I am using javascript based tabs to tab out content on a page. The content is dynamically generated from Wordpress custom fields. If the div has no content to display in the HTML I would like that corresponding tab to not appear. Is this possible?
my code is as such:
<ul class="tabs">
<li class="tab1">Tab 1</li>
<li class="tab2">Tab 2</li>
<li class="tab3">Tab 3</li>
<div class="tabcontents">
<div id="view1">
<div class="noScreen">
<h2>Tab 1</h2>
</div>
<div class="view1">
<?php the_field('tab1'); ?>
</div>
</div>
<!--end Tab1-->
<div id="view2">
<div class="noScreen">
<h2>Tab 2</h2>
</div>
<div class="view2">
<?php the_field('tab2'); ?>
</div>
</div>
<!--end Tab2-->
<div id="view3">
<div class="noScreen">
<h2>Tab 3</h2>
</div>
<div class="view3">
<?php the_field('tab3'); ?>
</div>
</div>
<!--end Tab1-->
</div>
<!--end tabcontents-->
So if Tab1 and Tab3 respond back with data from the post but Tab 2 is empty I would like to hide the li for Tab 2 up above.
Can anyone help?
thank you in advance
I had to fix some missing tags and quotes from your HTML above, but this seems to do the trick.
JSFiddle:
http://jsfiddle.net/Q27K6/
$(function(){
$('div.tabcontents > div').each(function(index){
var innerView = $(this).find('div[class^="view"]');
var innerHtml = $(innerView).html();
if(innerHtml.trim() == ''){
$(this).hide();
$('ul.tabs').find('li').eq(index).hide();
}
});
});
instead of using the_field (which prints info) see if theres a get_field function that returns info. That way you could decide beforehand if the div will be empty.
$tab2content=get_field('tab2');
if(!empty($tab2content)) {
echo '<div id="view2">';
echo '<div class="noScreen"><h2>Tab 2</h2></div>';
echo '<div class="view2">'.$tab2content.'</div>';
echo '</div>';
}
If that doesn't work, after your contents is loaded and any ajax calls are resolved, you could tell if the div was empty by running
if(jQuery('.view2').html()==='') {
jQuery('#view2').hide();
}
However, keep in mind that if your DOM has more than one elements with view2 class, the html() method will yield the contents of the first one that matches.
You want to know if the contents of <div class='view2'> is empty? div id='view2'> will never be empty, so I'll assume it's the former.
So, whether it is empty or not depends on whether there is anything returned from the php function the_field('tab2'), right?
So, one way of solving the problem is to do it on the server, by checking if the function the_field('tab2') (or whatever) is empty. That's slightly convoluted in php though.
Or in javascript:
$().ready(function() {
var hideTab = function(index) {
var $view = $('.view' + index)
, $tab = $('.tab' + index);
if($.trim($view.html()).length === 0) {
$tab.hide();
}
}
// Stick this in a loop to make it neater
hideTab(1);
hideTab(2);
hideTab(3);
});
Related
sorry for the title, I don't know how I should have said it better (my brain is currently melting because of this problem I can't solve).
Here's a description of my problem:
At first I have one div with a list of names in it:
<div id="objekt1">
<ul id="listeNamen">
<li> Hans Mustername </li>
<li> Hans Mustername </li>
<li> Hans Mustername </li>
</ul>
</div>
When I click on a name in this div, a second div box (#objekt2) pops up, with more information about the person I clicked on. In this div box there may be a link to even more details, if you click this #objekt3 (new div box) should pop up.
If I already clicked on the link in #objekt1 and click it again, there shouldn't be any more div added, same goes for #objekt2.
Now I've tried it using jQuery, sadly it doesn't work the way it should. If I click the link in #Objekt1 2 times, 2 divs will be added. If I click the link in #Objekt2 no div is added.
Here's my jQuery code for this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
function checkDiv(){
var anzahlDiv = $("div").length;
if (anzahlDiv == 1){
$('<div id="objekt2">testlink #1</div>').insertAfter("#objekt1");
}else if (anzahlDiv == 2){
$('<div id="objekt3">testlink #2</div>' ).insertAfter("#objekt2");
}else{
return;
}
exit;
}
$('#objekt1 ul li a, #objekt2 a').click(function () {
checkDiv();
});
Is there anyone here who could help me out on this one please? :(
I would do it by adding some data attributes to the html, and then process those with generalized javascript. It's more readable, and no need to modify code if the data changes.
Basically I added a data-show attribute to the links, which is a comma separated list of the div ids that needs to be visible when the link has been clicked.
HTML:
<div id="objekt1">
<ul id="listeNamen">
<li>John</li>
<li>Mary</li>
</ul>
</div>
<div id="john-info" class="infodiv">
Info about John.
More info
</div>
<div id="john-moreinfo" class="infodiv">
More info about John.
</div>
<div id="mary-info" class="infodiv">
Info about Mary.
More info
</div>
<div id="mary-moreinfo" class="infodiv">
More info about Mary.
</div>
CSS:
.infodiv {
display: none;
}
JS:
$("body").on("click", ".infolink", function (event) {
var dataShow = $(this).attr("data-show").split(",");
$(".infodiv").each(function (index, div) {
var divId = $(div).attr("id"),
visible = dataShow.indexOf(divId) !== -1;
$(div).toggle(visible);
});
event.preventDefault();
});
Here is a working demo jsfiddle.
Since you want different actions for different objects you should have differnet functions e.g.:
....
//Based on your curent code
function for_objekt1()
if (anzahlDiv == 1){
$('<div id="objekt2">testlink #1</div>').insertAfter("#objekt1");
}else if (anzahlDiv == 2){
$('objekt2').remove();
if (anzahlDiv == 3){
$('objekt3').remove();
...
}
}
...
or something similar
Incase if you have fewer divs to show then you can do like this
<div id="objekt1">
<ul id="listeNamen">
<li> Hans Mustername </li>
<li> Hans Mustername </li>
<li> Hans Mustername </li>
</ul>
</div>
<div id="test"></div>
<script type="text/javascript">
function first(){
$('#test').html("");
$('#test').html('or any thing you want');
}
function second(){
$('#test').html("");
$("#test").html("other thing you want"
)};
</script>
In case you have dynamic content the you can create a single function and pass its id the function and change the content of the div as you would like. It may not solve the problem but hope it would be helpful enough :)
I am trying to figure out how to do this, but I can't get it.
It's supposed to be like a step by step-thing. When pressing the image, both the text and image will change. There are supposed to be 3 steps.
I have been trying a little bit js and php, but it haven't helped yet. Also CSS, but it's a little bit hard because it's 3, and not 2 steps. (I have been trying this e.g.: http://jsfiddle.net/eliranmal/2rwnz/)
<div id="forsideslides" class="row">
<div class="container">
<div id="forsideslides_tekst" class="col col-lg-6 col-sm-6"><div class="well">
<h1>Step 1</h1>
<p class id="forsideslides_innhold_tekst">Text 1 out of 3</p>
</div></div>
<div id="forsideslides_bilde" class="col col-lg-4 col-sm-4"><div class="well">
<img src="<?php bloginfo('stylesheet_directory'); ?>step1.png">
</div></div>
</div>
</div>
One of the codes I have been trying to use is the following:
$('.slider_innbokskontroll').click(function(){
var $this = $(this);
$this.toggleClass('slider_innbokskontroll');
if($this.hasClass('slider_innbokskontroll')){
$this.text('Les mer');
} else {
$this.text('Les enda mer');
}
});
But it was not what I have was looking for.
By pressing the image (see code below) it should change.
<div id="forsideslides_bilde" class="col col-lg-4 col-sm-4"><div class="well">
<img src="<?php bloginfo('stylesheet_directory'); ?>step1.png">
</div></div>
It should be changing like step1.png => step2.png (don't bother about the details with the link, I just made it simple to get it easier to understand)
The text below should also change:
<div id="forsideslides_tekst" class="col col-lg-6 col-sm-6"><div class="well">
<h1>Step 1</h1>
<p class id="forsideslides_innhold_tekst">Text 1 out of 3</p>
</div></div>
E.g like:
Step 1 -> Step 2
Text 1 out of 3 -> Text 2 out of 3
And so forth...
As I see it, it is relatively simple, but I have really no idea of what I am doing. Is there someone who could help me finding the solution? A short code I may understand would be fine.
Thank you.
Looks to me like you are not targeting the correct DOM element.
In your example jQuery code:
$('.slider_innbokskontroll').click(function(){
var $this = $(this);
$this.toggleClass('slider_innbokskontroll');
if($this.hasClass('slider_innbokskontroll')){
$this.text('Les mer');
} else {
$this.text('Les enda mer');
}
});
You are trying to change the $(this) object, instead of what you want above.
So instead do something like this:
$('.slider_innbokskontroll').click(function(){
$('#forsideslides_tekst h1').text('Step 2');
$('#forsideslides_tekst p').text('Text 2 out of 3');
$('#forsideslides_bilde img').attr('src', 'newimage.jpg');
});
where your on click will have the class slider_innbokskontroll
EDIT here is the jsfiddle: http://jsfiddle.net/2rwnz/204/
using your HTML code:
<div id="forsideslides" class="row">
<div class="container">
<div id="forsideslides_tekst" class="col col-lg-6 col-sm-6">
<div class="well">
<h1>Step 1</h1>
<p class id="forsideslides_innhold_tekst">Text 1 out of 3</p>
</div>
</div>
<div id="forsideslides_bilde" class="col col-lg-4 col-sm-4">
<div class="well">
<img src="http://placehold.it/350x150">
</div>
</div>
</div>
</div>
the jQuery:
$("#forsideslides_bilde img").click(function(){
if ($(this).attr('src') == 'http://placehold.it/350x150') {
$('#forsideslides_tekst h1').text('Step 2');
$('#forsideslides_innhold_tekst').text('Text 2 out of 3');
$(this).attr('src', 'http://placehold.it/350x200');
} else if($(this).attr('src') == 'http://placehold.it/350x200') {
$('#forsideslides_tekst h1').text('Step 3');
$('#forsideslides_innhold_tekst').text('Text 3 out of 3');
$(this).attr('src', 'http://placehold.it/350x300');
}
});
You can also use a global variable to detect which step, but just because I want to show you how you can detect which image i coded it that way.
You need to place the click event on your image first and then change the text...
Here is an example with jquery:
$('#forsideslides_bilde img').click(function() {
//Change text
$('#forsideslides_innhold_tekst').html('New text');
//Change image src
$('#forsideslides_bilde img').attr('src', 'newImageLocation.png');
});
You can try calling a JavaScript function when the image is clicked. In order to do that, you'll need to assign an onclick event listener to the image tag. In my example I'm using getElementsByName() so I'm giving each element a name tag as well...
<h1 name="change">Step 1</h1>
<p name="change">Step 1 of 3</p>
<img src="step1.png" name="change" onclick="nextStep()" />
Then you can use the Javascript code to get each one of the elements and change them accordingly. You should be able to add in the PHP method call for the image name without any issues.
<script language="javascript">
function nextStep() {
var changeElements = document.getElementsByName("steps");
changeElements[0].innerHTML = "Step 2"; // header tag
changeElements[1].innerHTML = "Text 2 out of 3"; // paragraph tag
changeElements[2].src = "<?php bloginfo('stylesheet_directory'); ?>step2.png"; // image tag
</script>
If the bloginfo('stylesheet_directory'); method call doesn't work within the JS code, you can assign that to a PHP variable instead and reference that variable in the JS code.
So I have a few tabs. There can be multiple tabs, but I currently have 3. What I am trying to do is to change the styling of the tab when it is clicked and the other tabs to have some other styling. My code is as follows:
<div id="ClaimTabs" class="TabbedPanels">
<div class="TabbedPanelsTabGroup">
<div id="list1" class="TabbedPanelsTab TabbedPanelsTabSelected">
<a id="anchor1" class="TabbedPanelAnchor" href="javascript:showTab(1);">Tab 1 </a>
</div>
<div id="list2" class="TabbedPanelsTab">
<a id="anchor2" href="javascript:showTab(2);" >Tab 2</a>
</div>
<div id="list3" class="TabbedPanelsTab">
<a id="anchor3" href="javascript:showTab(3);">Tab 3</a>
</div>
</div>
<div id="ClaimContent" class="TabbedPanelsContentGroup">
<div id="tab1" class="TabbedPanelsContent TabbedPanelsContentVisible" style="display: block;">
Screen 1
</div>
<div id="tab2" class="TabbedPanelsContent" style="display: none;">
Screen 2
</div>
<div id="tab3" class="TabbedPanelsContent" style="display: none;">
Screen 3
</div>
</div>
</div>
My script that manipulates the styling is as follows:
function showTab(tabNumber) {
var children = document.getElementById('TabbedPanelsTabGroup').childNodes;
document.getElementById('tab'.concat(tabNumber)).style.display = 'block';
document.getElementById('list'.concat(tabNumber)).setAttribute("class", "TabbedPanelsTab TabbedPanelsTabSelected");
document.getElementById('anchor'.concat(tabNumber)).setAttribute("class", "TabbedPanelAnchor");
for(i=1; i <= children.length ; i++)
{
if(i != tabNumber){
document.getElementById('tab'.concat(i)).style.display = 'none';
document.getElementById('list'.concat(i)).setAttribute("class", "TabbedPanelsTab");
document.getElementById('anchor'.concat(i)).setAttribute("class", "");
}
}
}
I was wondering if my logic is right. I am concatenating the tab, list and anchor with the number and updating styles. But this does not seem to be working.
You appear to have at least two problems here.
First, you're trying to use document.getElementById for TabbedPanelsTabGroup, but that's a class.
Second, you're using .childNodes when you are probably looking for .children. .childNodes includes all child nodes, including the text inside the tags (which is a node). So when you use that number to loop over it, your loop isn't counting to 3 (your # of divs), it's counting to 7, and that's giving errors.
But, .children isn't supported before IE9, so like others have suggested, you may want to consider jQuery to get at that with better support.
With plain JavaScript I would recommend EventListener:
<div id="elem"> "some content here" </div>
var elem = document.getElementById('elem');
elem.addEventListener ('click', show, false);
function show() {
//add css Class
var element = document.getElementById("elem");
element.classList.add("activeTab");
}
But as mentioned in the comment, jQuery is perfect for that kind of things.
best
M
I made a snippet and I am working a jQuery show/hide when the data attr matches.
HTML structure is like below
<div class="container">
<div class="item" data-item="1">1
<div class="inside" data-content="1">
</div>
</div>
<div class="item" data-item="2">2
<div class="inside" data-content="2">
</div>
</div>
<div class="item" data-item="2">3
<div class="inside" data-content="3">
</div>
</div>
</div>
the class class="item" will be append (ed) to outside div, I'd like to achieve that,
if content data-num is existing, do not "append()", show()instead, then the slides can be showed properly. I wanted to learn how to check if data-num existing?
so the concept is like that,
if click on class item if item 's data-item(e.g. data-item = "2") matches outside > content data-num (e.g data-num = "2" ), then show() that content class.
Hope I made it clear. Thanks a lot.
Here is online sample: http://jsfiddle.net/8VD9R/
You have to iterate over the content class.
I am writing the sample code here ,Please update it accordingly:
$('.item').click(function(){
$('.content').hide();
$('.content').each(function(i, obj) {
if($(this).attr('data-item')==$(obj).attr('data-num'))
{
$(obj).show();
return;
}
});
});
I have 2 questions:
1) Since I have similar structure for the html contents and the only difference is that class title contents are different. I tried using $(div .title:contains("cat")) also
$(div .title).text()="cat")
2)How can I get the index of the accordion by just checking the $(div a) contents are required ones. I tried using $(div a).text()=="cat"
Check the codes here:
HTML1 contents
<div class="mod moduleselected" id="mod969">
<div class="content module moduleselect">
<div class="hd" ><div class="inner">
<div class="title">cat</div>
<ul class="terminallist"></ul>
<ul class="buttons">
<li class="help"></li>
<li class="show" ></li>
</ul>
</div>
</div>
</div>
<div class="mod moduleselected" id="mod969">
<div class="content module moduleselect">
<div class="hd" ><div class="inner">
<div class="title">rat</div>
<ul class="terminallist"></ul>
<ul class="buttons">
<li class="help"></li>
<li class="show" ></li>
</ul>
</div>
</div>
</div>
<div class="mod moduleselected" id="mod969">
<div class="content module moduleselect">
<div class="hd" ><div class="inner">
<div class="title">dog</div>
<ul class="terminallist"></ul>
<ul class="buttons">
<li class="help"></li>
<li class="show" ></li>
</ul>
</div>
</div>
</div>
Accordian
<div id="dia">
<div id="dialog" title="Detailed FeedBack ">
<div id="accordion">
<h3>dog</h3>
<h3>cat</h3>
<h3>rat</h3>
</div>
</div>
</div>
Javascript
$('div .title').mouseover(function() {
if($("div a").text().indexOf("cat")!=-1)
{
$("#accordion").accordion("activate", 1);
}
$('div .title').mouseleave(function(){$("#accordion").accordion("activate", -1); });
});
Here is what I am trying to do with this javascript code. When I mouse over the cat contents I want the accordion with cat contents to open. And when I leave it to close the accordion selection.
When I hover my mouse over the html contents cat ,rat. It should side by side open the accordion button of those contents. Example: I hovered over rat (of html contents) I should see accordion rat open (or active i.e. contents visible).
Updated (see demo)
It sounds like you want something like this: when a content section is hovered over, find the title of that section, match its text against the text of the <a> elements in the accordion, and activate that section:
$(function() {
$("#accordion").accordion();
var links = $('#accordion a').map(function() {
return $(this).text().trim().toLowerCase();
}).toArray();
$('div.content').mouseover(function() {
var title = $(this).find('div.title').text().toLowerCase();
var index = links.indexOf(title);
if (index != -1) {
$("#accordion").accordion("activate", index);
}
});
});
P.S. jQuery does have a .hover() method for this as well.
It should be as succinct as the following (with potential minor tweaks):
$('.content .title').hover(function(e){
var index = this.textContent.split(/\W/)[1] - 1;
$("#accordion").accordion('activate', index);
});
Be careful with the HTML as this regular expression is overly simple in that it just grabs the last "word" which in the case of your example is a number. We subtract one to get a zero-based index. That will break if you add further text to the element.
See: http://jsfiddle.net/35yGV/