I am trying to accomplish this effect but I'm sure the coding is incorrect. I want the image DIVs to swap content when each button is clicked. This is what I have so far, but I'm sure the code is incorrect. Is there a better way of achieving this? thanks, and forgive me for the noob question.
HTML:
<div class="item-1 content-item">
I am the 1st image content
</div>
<div class="item-2 content-item" style="display: none;">
I am the 2nd image content
</div>
<div class="item-3 content-item" style="display: none;">
I am the 3rd image content
</div>
<div class="item-1 content-item">
I am the content for item 1
</div>
<div class="item-2 content-item" style="display: none;">
I am the content for item 2
</div>
<div class="item-3 content-item" style="display: none;">
I am the content for item 3
</div>
<ul>
<li class="change-item" data-item="1">Item 1</li>
<li class="change-item" data-item="2">Item 2</li>
<li class="change-item" data-item="3">Item 3</li>
</ul>
jQuery:
$('.change-item').click(function(){
var this_item = $(this).attr("data-item");
$('.content-item').hide();
$('.item-' + this_item).fadeIn();
});
A couple tips you might find helpful, even though it is working fine.
Since your items are actually grouped by number and the stuff in between is hidden, you could just group them together.
You should consider using id attributes in your markup. This makes it more clear that each one of your items is unique and makes the javascript run faster.
Your <ul> is technically in order, so it's more properly an <ol>. This is splitting hairs, and will give you numbers instead of bullet points, giving you more work to style it correctly. But it's worth mentioning.
Consider giving some indication that the list items are interactive. You could make them buttons or anchors (so they would display like hyperlinks). Or try a css rule for the cursor to make the mouse pointer change when they a user goes over the link.
Like this:
.change-item {
cursor: pointer;
}
Put it all together, it might look something like this:
HTML:
<div id="item-1" class="content-item">
<img src="/item-1.png"/>
<p>I am the content for item 1</p>
</div>
<div id="item-2" class="content-item" style="display:none;">
<img src="/item-2.png"/>
<p>I am the content for item 2</p>
</div>
<div id="item-3" class="content-item" style="display:none;">
<img src="/item-3.png"/>
<p>I am the content for item 3</p>
</div>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
Javascript:
$('.change-item').click(function(){
var this_item = $(this).attr("data-item");
$('.content-item').hide();
$('#item-' + this_item).fadeIn();
});
But as you can tell, your code is fully functional as is. You didn't do anything terribly wrong (good job!), these are just a few things that might make this page easier on you or your users.
Related
I have a menu that becomes a dropdown when it is in mobile, and floats right when it is desktop, therefore all my divs are reversed in order since float right wouldn't work otherwise
<div class="menu active">
<div class="dropdown-content">
<div class="menu-item whitelist">
Join Whitelist
</div>
<div class="menu-item">
FAQ
</div>
<div class="menu-item">
Team
</div>
<div class="menu-item">
Token
</div>
<div class="menu-item">
About
</div>
</div>
<div class="dropdown-btn">
<a class="dropdown" href="javascript:void(0)">☰</a>
</div>
</div>
my question is how can I make then "float" downwards in my dropdown menu so they are in the right order? Or is it better to change how they act when it's in desktop mode?
You probably want them in the correct order to begin with, then use display:inline-block to make them all go on a single line for desktop.
Hard to tell without seeing any css or design, but that sounds reasonable.
The way that Zendesk's Help Centre works is by printing all the sections onto the page without giving them any unique identifier, so it's a pain if you want to implement any sort of scrollspy (updating a sidenav with where you are on the page), and most importantly anchors so that the sidenav actually works.
I'm not that technical and was wondering if anyone knew of a way to add an ID & class to a series of headers using JS?
I'm thinking for each h2 in section-tree-with-article, adding a unique ID, and a class that matches the h2's text?
Any thoughts?
You need to select all the h2 elements, iterate through them and set a class as well as an id with each iteration.
I've simple set the innerHTML as the class. You can modify it according to your use case.
var headers = document.querySelectorAll("div.section-tree-with-article h2");
headers.forEach(function(header, idx) {
header.className = header.textContent.replace(/\s/g, "-"); //You can modify this accordingly
header.id = "uniqueID" + idx; //And similarily the uniqueID
})
<div class="section-tree-with-article">
<ul>
<li class="section">
<h2>Admin 0</h2>
</li>
</ul>
<ul>
<li class="section">
<h2>Admin 1</h2>
</li>
</ul>
<ul>
<li class="section">
<h2>Admin 2</h2>
</li>
</ul>
<ul>
<li class="section">
<h2>Admin 3 4 5</h2>
</li>
</ul>
<ul>
<li class="section">
<h2>Admin 4</h2>
</li>
</ul>
</div>
Here's the same solution in jquery:
$("div.section-tree-with-article h2").each(function(index, value){
var classToAdd = $(this).text();
$(this).attr('class', classToAdd);
$(this).attr('id', "uniqueID" + index);
})
Although this answer does not address your request for a JavaScript solution, I recommend instead using the Help Center's built-in templating system to iterate on the elements and add classes, directly in the html files. Please note that this is only available in the "Professional" and "Enterprise" Zendesk plans.
This example is probably not the best, since you will end up with spaces or other unusable characters in the value of the h2 elements' class attribute (it will replace {{name}} with the section's name), but I hope it will give you an idea of how this works, and how you might use it to achieve a solution.
<div class="section-tree-with-article">
<ul>
{{#each sections}}
<li class="section">
<h2 class="{{name}}" id="{{id}}">{{name}}</h2>
</li>
{{/each}}
</ul>
</div>
will end up something like this:
<div class="section-tree-with-article">
<ul>
<li class="section">
<h2 class="Admin and Settings" id="12345">Admin and Settings</h2>
</li>
<li class="section">
<h2 class="Getting Started" id="45678">Getting Started</h2>
</li>
...[more sections]...
</ul>
</div>
More info on Help Center templating here:
https://support.zendesk.com/hc/en-us/articles/216367358-Help-Center-templating-cookbook-Professional-and-Enterprise-
Firstly, I need to say that I'm pretty new to jQuery.
I have this situation: http://jsfiddle.net/dVf8m/
I've been wondering if there is a way to do the slideToggle simplier. Now I have two ids on menu elements (#trigger1 and #trigger2) and two ids on the hidden divs (#one and #two). This also results in double jQuery. Is it possible to avoid all the ids and make it simpler?
Another thing is that if I click on both menu elements (First and Second) both divs appear. I want only one of the hidden divs to be visible at one time? How can I force the first div to disappear when the other one is appearing?
Also, if I'd want to use fadeIn/fadeOut in this situation, how to do it when both of them use the .click event?
Change your code to something like below. Have a class for the div and add click listener to it. add any attribute to the div and give the id of the div to be toggled.
<div id="top">
<ul>
<li><span id="trigger1" class="toggler" data-item="item1">First</span></li>
<li><span id="trigger2" class="toggler" data-item="item2">Second</span></li>
<li>Third</li>
</ul>
</div>
<div class="hidden" id="item1">
<ul>
<li>Smthn</li>
<li>Smthn2</li>
<li>Smthn3</li>
</ul>
</div>
<div class="hidden" id="item2">
<ul>
<li>Apple</li>
<li>Orange</li>
<li>...</li>
</ul>
</div>
$(document).ready(function() {
$('.toggler').click(function(e) {
$("#"+$(this).attr("data-item")).slideToggle(500);
});
});
JSFIDDLE
I've looked around and unfortunately, haven't found anything that quite matches what I'm hoping to achieve. I have two things going on. First an image/content slider which I'm using Awkward Showcase for. Then within each slide I need to build a mousein/mouseout effect that swaps and hides an image when the user hovers over the text option. My JS looks like this:
$("#news-2, #news-3, #news-4, #news-5, #news-6").hide();
$("#newsitem-1, #newsitem-2, #newsitem-3, #newsitem-4, #newsitem-5, #newsitem-6").mouseover(function(){
$(this).css('cursor', 'pointer');
if($("#newsitem").val() != $(this).attr('id').replace('newsitem', 'news')){
$("#news-1").hide();
$("#news-2").hide();
$("#news-3").hide();
$("#news-4").hide();
$("#news-5").hide();
$("#news-6").hide();
$("#newsitem").val($(this).attr('id').replace('newsitem', 'news'));
var vid = $(this).attr('id').replace('newsitem', 'news');
$("#" + vid).show();
}
});
My html looks like this:
<div id="showcase" class="showcase">
<div class="showcase-slide cs-1">
<div class="showcase-content">
<div class="cs-container">
<div class="thumbs">
<div id="news-1"><img src="http://placehold.it/640x360/eeeeee/cccccc" border="0"></div>
<div id="news-2" style="display: none;"><img src="http://placehold.it/640x360/dddddd/dddddd" border="0"></div>
<div id="news-3" style="display: none;"><img src="http://placehold.it/640x360/cccccc/aaaaaa" border="0"></div>
</div>
<div class="cs-links">
<h2>Link Title 1</h2>
<ul>
<li id="newsitem-1">Hover Change Image 1</li>
<li id="newsitem-2">Hover Change Image 2</li>
<li id="newsitem-3">Hover Change Image 3</li>
</ul>
</div>
</div>
</div>
<div class="showcase-thumbnail">
<div class="showcase-thumbnail-caption">Caption Title</div>
<div class="showcase-thumbnail-cover"></div>
</div>
</div>
<div class="showcase-slide cs-2">
<div class="showcase-content">
<div class="cs-container">
<div class="thumbs">
<div id="news-4"><img src="http://placehold.it/640x360/eeeeee/cccccc" border="0"></div>
<div id="news-5" style="display: none;"><img src="http://placehold.it/640x360/dddddd/dddddd" border="0"></div>
<div id="news-6" style="display: none;"><img src="http://placehold.it/640x360/cccccc/aaaaaa" border="0"></div>
</div>
<div class="cs-links">
<h2>Link Title 2</h2>
<ul>
<li id="newsitem-4">Hover Change Image 1</li>
<li id="newsitem-5">Hover Change Image 2</li>
<li id="newsitem-6">Hover Change Image 3</li>
</ul>
</div>
</div>
</div>
<div class="showcase-thumbnail">
<div class="showcase-thumbnail-caption">Restaurant TV</div>
<div class="showcase-thumbnail-cover"></div>
</div>
</div>
</div>
Any suggestions would be hugely appreciated. One thing to note is the code I've written only works once, once you engage the slide function the hover effect breaks unless you hard refresh.
Edit: Question is, how can I make this more efficient. I have multiple items (image and text). And any ideas why this breaks once the slide function is engaged?
I used ID's because it's a one to one relationship between the text and the associated image.
Edit 2: If I swap the order of my js, the function breaks. Here is a JSFiddle as long as I keep this order everything works until I engage the slider.
http://jsfiddle.net/mV3dJ/
I've not really seen a function done like this before but one thing that stands out to me as a potential breaker is this
var vid = $(this).attr('id').replace('newsitem', 'news');
If you're replacing an ID of something which listen to an event, then the event can only occur once on that element (as the next time it has a different name and so won't recognise it.
Ideally you want to use a web debugger like firebug or Chrome developer tools, set breakpoints and figure out from stepping through the code why it isn't working correctly.
I'm trying to implement an Orbit slider into my page. This works fine with just images and regular bullets, but when I add deeplinks to this, the # href of each deeplink is triggered and i'm sent back to the top of the page. I don't even know if the data-orbit-link is working or not.
<div class="row">
<ul id="featuredCom" data-orbit>
<li data-orbit-slide="image-1">
<img src="images/featureimages/slide2.jpg" />
</li>
<li data-orbit-slide="image-2">
<img src="images/featureimages/slide1.jpg" />
</li>
<li data-orbit-slide="image-3">
<img src="images/featureimages/slide3.jpg" />
</li>
</ul>
</div>
<div class="row">
<ul class="inline-list">
<li>Image One</li>
<li>Image Two</li>
<li>Goto Three 3</li>
</ul>
</div>
<script>
$(window).load(function(){
$('#featuredCom').orbit({
});
});
</script>
I haven't altered anything in the orbit.js file so I can't see what would be causing this. Read the Foundation 4 orbit docs back and forth to see if i'm missing anything, but even when copy their code, the deeplinks behave the same way. Any help would be appreciated!
You can use javascript: void(0);
Image One
And use
$(document).foundation();