I am hoping somebody can help me out with my Javascript. The JSFiddle shows you how far I have got, I'm not far off...but I am basically trying to get the content of the enclosed DIVs to align to the top of the '.news_window' box when the nav is clicked.
http://jsfiddle.net/s5sxa0sk/2/
I realise that the scrollTop going to 'this' is incorrect, but I don't know how else to proceed.
Any input would be very much appreciated.
The HTML:
<ul class="news_archive">
<li class="active">December</li>
<li>November</li>
<li>October</li>
</ul>
<div class="news_window">
<div id="dec_2014">
<p>December Content</p>
</div>
<div id="nov_2014">
<p>November Content</p>
</div>
<div id="oct_2014">
<p>October Content</p>
</div>
</div>
The Javascript:
<script>
$(".news_archive li").click(function(e){
e.preventDefault();
$('.news_window').animate({scrollTop:$(this).position().top}, 'slow');
$('.news_archive li.active').removeClass('active');
$(this).addClass('active');
});
</script>
Your main issues is you're using the #new_archive link's top position to animate the scroll instead of the #news_window item's top position. You need to find the #news_window element based on which link is clicked and use that element's position().top.
You will also need a wrapper around the #news_window items otherwise each element's position().top will change based on the current scroll position of the #news_window element. This wrapper will need position: relative set.
Here's what I mean:
<ul class="news_archive">
<li class="active">
<a data-id="dec_2014" href="#">December</a>
</li>
<li>
<a data-id="nov_2014" href="#">November</a>
</li>
<li>
<a data-id="oct_2014" href="#">October</a>
</li>
</ul>
<div class="news_window">
<div class="wrapper">
<div id="dec_2014">
<p>December Content</p>
</div>
<div id="nov_2014">
<p>November Content</p>
</div>
<div id="oct_2014">
<p>October Content</p>
</div>
</div>
</div>
And the Javascript:
$('.news_archive li a').click(function(e) {
e.preventDefault();
var newsWindowEl = $('#'+$(this).data('id'));
$('.news_window').animate({
scrollTop: newsWindowEl.position().top
}, 'slow');
$('.news_archive li.active').removeClass('active');
$(this).parents('li').addClass('active');
});
Here's a working version of your fiddle: http://jsfiddle.net/s5sxa0sk/42/
Related
I'm trying to draw a delete button right at the right top corner of the collapsible box. I already did it but for some reason I can't make it show at the top of the collapsible element so it's visible. I tried to set it to visibility: visible but I still can't make it visible. Any ideas or suggestions will be appreciated.
Here's my HTML code:
<div data-role='main' class='ui-content' id='collapse'>
<div data-role='collapsible' data-theme='b' data-content-theme='b' data-iconpos='right' data-expanded-icon='collapse' data-collapsed-icon='expand'>
<h4>
<a href='#' data-rel='back' data-role='button' data-icon='delete' data-iconpos='notext' style='position:absolute;top:-20px;right: -10px'>Close</a>
<div class='ui-grid-a'> <div class='ui-block-a textfloatleft' > 1 new </div>
<div class='ui-block-b textfloatright'>January 6th 2016</div>
</div>
<span id='collapstxt'> first </span>
<button href='#' id='bt01' data-icon='check' data-iconpos='right' style='width:100px;' onclick='alert(1);event.stopPropagation();' >Reply</button>
</h4>
<ul data-role='listview'>
<li id='answerstyle'><span id='answerstxt'> first </span>
<div class='ui-block-b answrfloatright'>January 6th 2016</div>
</li>
<li id='answerstyle'>Audi</li>
<li id='answerstyle'>BMW</li>
<li id='answerstyle'>Cadillac</li>
<li id='answerstyle'>Ferrari</li>
</ul>
</div>
</div>
And my jsfiddle example
To get the effect yore looking for you would need to add overflow: visible; to the containing element:
a.ui-collapsible-heading-toggle.ui-btn.ui-icon-expand.ui-btn-icon-right.ui-btn-b { overflow:visible;}
Here is the JS Fiddle
I have this toggle which is working fine.
I just want to close one when second is clicked.
Right now its opening all the slides.
jQuery(function($){
$(document).ready(function() {
$("h3.symple-toggle-trigger").click(function() {
$(this).toggleClass("active").next().slideToggle("fast");
return false;
});
});
});
I don't know how your html is structured exactly but I put together an example of html that will work with a few alterations to your JavaScript. You may have to tinker around with it to get the exact desired effect your looking for but I believe it is pretty close.
Live Preview: http://codepen.io/larryjoelane/pen/yeoGNr
HTML:
<h3 class="symple-toggle-trigger">
Trigger 1
</h3>
<p class="section">
section 1
</p>
<h3 class="symple-toggle-trigger">
Trigger 2
</h3>
<p class="section">
section 2
</p>
<h3 class="symple-toggle-trigger">
Trigger 3
</h3>
<p class="section">
section 3
</p>
I removed the document ready function call from your code. You will not need it if you are loading your scripts before the closing </body> tag. If you are loading your script from the <head> element then you will need to add it back.
I rearranged your anonymous function wrap/closure so that it returns the jQuery object just in case you want to use another library with your code in the future. I don't know if that matters to you are not I just thought it might help.
JavaScript:
(function($){//begin closure
$("h3.symple-toggle-trigger").click(function() {
var active = $(this).index(".symple-toggle-trigger");
$(this).next(".section").slideToggle("fast");
$(".symple-toggle-trigger").each(function(i){//begin each
//if the element index doesn't equal the active index or the element clicked on.
if(i !== active){//begin if then
//hide the section
$(".section")[i].style.display = "none";
}//end if then
});//end each
});
}(jQuery));//end closure
li div{ display: none;}
li div.open{ display: block;}
$(document).ready(function(){
$(".symple-toggle-trigger").click(function(){
$("ul li div").slideUp();
$("ul li h3.active").removeClass("active");
$(this).addClass("active").next().slideDown();
});
});
<ul>
<li>
<h3 class="symple-toggle-trigger">Heading 01</h3>
<div>Content</div>
</li>
<li>
<h3 class="symple-toggle-trigger">Heading 01</h3>
<div>Content</div>
</li>
<li>
<h3 class="symple-toggle-trigger">Heading 01</h3>
<div>Content</div>
</li>
<li>
<h3 class="symple-toggle-trigger">Heading 01</h3>
<div>Content</div>
</li>
<li>
<h3 class="symple-toggle-trigger">Heading 01</h3>
<div>Content</div>
</li>
</ul>
Click here for Demo https://jsfiddle.net/pixeldew/u5qg21fx/
Hi Im building a menu and i need to detect the next move for the mouse. Currently im using event.relatedTarget and getting the event.relatedTarget.id of the next element. It worked until i had to make some modifications to my css in on my menu so i had to get rid of overflow: hidden; and use display: inline-block;. The thing that happens now is that the event.relatedTarget is an empty string except for when i pull the mouse fast down to my menu items. Ill post parts of the code and have the full thing on jsfiddle. any ideas guys?
link to the project
Navigation.top_links.on('mouseleave', function (event) {
var sub_wrapper = $('.sub-wrapper'),
target_id = event.relatedTarget.id;
console.log(event.relatedTarget.id);
console.log(event.relatedTarget.id);
if (target_id == 'got_me_sections' || target_id == 'got_me_products' || target_id == 'ind_sections' || target_id == 'ind_products') {
console.log('mouse down to items');
return false;
}
sub_wrapper.removeClass('sections').removeClass('products');
sub_wrapper.hide();
});
its much html so it gets kinda messy, sorry.
<ul id="top_nav">
<li class="first">sections</li>
<li>products</li>
<li>
<div id="nav_cart">
<div class="gfx-div-cart"></div>
</div>
</li>
</ul>
<div id="sub_nav">
<div id="sub_sections" class="sub-wrapper">
<div id="got_me_sections" class="top-space">
<div id="ind_sections" class="indicator"></div>
</div>
<div class="nav-items-wrapper">
<div class="nav-items-breadcrumb">
<ul class="breadcrumb">
<li class="bc first">sections</li>
<li class="bc last"> </li>
</ul>
</div>
<div class="nav-items">
<ul class="nav-items-list">
<li>item.Name</li>
</ul>
</div>
</div>
</div>
</div>
I solved this by adding css to the <div id="sub_nav">...</div>
i moved the container up a bit with negative margin-top: -4px;
I am trying to create a menu navigation sort of like tab's but with vertical buttons.. When I start the page, the first li class is removed and when I click any other link nothign happens other then my content div's being shown..
The first link should always be active on page start.
<script type="text/javascript">
$(document).ready(function() {
var tabContainers = $('div.pages > div');
$('div.sidemenu ul.list a').click(function () {
tabContainers.hide().filter(this.hash).show();
$('div.sidemenu ul.list li').removeClass('active');
$(this).addClass('active');
return false;
}).filter(':first').click();
});
</script>
<div class="sidemenu">
<ul class="list">
<li class="active">Login & Password</li>
<li>Contact Details</li>
<li>Company & Branch Details</li>
<li>Address Details</li>
</ul>
</div>
<div class="pages">
<div id="first">
CONTENT 1
</div>
<div id="second">
CONTENT 2
</div>
<div id="third">
CONTENT 3
</div>
<div id="forth">
CONTENT 4
</div>
</div>
Not sure what I am missing here.. Maybe its cuase I just woke up and still on my first cup of coffee.. ;)
You're adding the class to the <a> element, but removing it from its parent <li> element.
$(this).addClass('active'); // "this" is the <a> that received the event
// This removes "active" from the <li>
$('div.sidemenu ul.list li').removeClass('active');
Looks like you intend for the <li> to have the class. So you'd do this instead:
$(this).parent().addClass('active');
Or if you don't mind me mixing a little DOM API in:
$(this.parentNode).addClass('active');
Now go get a refill! ;o)
you add the "active" class to the A-Element
$(this).addClass('active');
i guess you want to add it to the LI-Element, so either you add
$(this).parent().addClass('active');
or you register the onclick on the LI-Element
I am trying to hide the current tab which is displayed and fadein the new tab based on its href using jquery...
Here is my HTML
<div id="leader">
<ul id="llist">
<li class="t current"><span>sage solutions</span></li>
<li class="m"><span>credit mangement solutions</span></li>
<li class="b"><span>third party additions</span></li>
</ul>
<div id="lcontent">
<div id="solutions" class="tab">
<h2>Title</h2>
Description
</div>
<div id="management" class="tab">
<h2>Title</h2>
Description
</div>
<div id="thirdparty" class="tab">
<h2>Title</h2>
Description
</div>
</div>
</div>
And the JQUERY (which also slides an image to the tab which is selected)
$('#leader #llist li').click(function() {
$('#leader #llist li').removeClass('current');
var thisTop = $(this).offset().top;
$('.pointer').animate( {'top': thisTop} );
$(this).addClass('current');
$('.tab').fadeOut();
});
The current tabs dont currently fadeout or fadein when the links in the list are clicked...any help would be appreciated.
Here is an example of what I think you are looking for.
http://jsbin.com/iceli4/edit
Hope this gets you started.
Bob