How to prevent div aligning to bottom - javascript

In this fiddle : http://jsfiddle.net/ak4Ed/139/
When I click a node (which loads the iframe) the tree structure aligns to the bottom of the iframe. How can I align the tree to remain at the top of corresponding iframe ?
I've tried adding margin:0px; to the div which contains the tree but it does not work.
Here is the fiddle code :
<div id="demo1" style="height:100px;display:inline-block;margin:0px;">
<ul>
<li id="node_1_id">
<a>Root node 1</a>
<ul>
<li id="child_node_1_id">
<a>Child node 1</a>
</li>
<li id="child_node_2_id">
<a>Child node 2</a>
</li>
</ul>
</li>
</ul>
<ul>
<li><a>Team A's Projects</a>
<ul>
<li><a>Iteration 1</a>
<ul>
<li><a>Story A</a></li>
<li><a>Story B</a></li>
<li><a>Story C</a></li>
</ul>
</li>
<li><a>Iteration 2</a>
<ul>
<li><a>Story D</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<div style="display: inline-block;">
<iframe id="preview" src=""></iframe>
</div>
$(function() {
$('#preview').toggle();
$("#demo1").jstree({
"plugins": ["ui", "html_data", "themes", "hotkeys"]
});
$("#demo1").on("select_node.jstree", function() {
var node = $(this).find("a.jstree-clicked").parent("li");
$('#preview').show();
$('#preview').attr('src', 'http://www.google.com')
alert("selected node: "+node.attr("id"));
});
});

Simply add "vertical-align:top" to div style
<div id="demo1" style="height:100px;display:inline-block;margin:0px;vertical-align:top">
jsfiddle

If you want the tree to stay on top of the iFrame:
<div id="demo1" style="height:100px;display:inline-block;margin:0px;margin-right:100%">
jsFiddle

Demo
just add this to css
#demo1
{ position:fixed;
}
or
append position:fixed; in div with id demo1
<div id="demo1" style="position:fixed;height:100px;display:inline-block;margin:0px;vertical-align:top">
Hope this helps,Thank you

Related

How i can delete text inside li with jquery or regular javascript, wordpress theme

I want to delete text "previous" inside li in wordpress theme.
the text to delete
<ul class="flex-direction-nav">
<li class="flex-nav-prev">
<a class="flex-prev" href="#">Previous</a>
</li>
<li class="flex-nav-next">
<a class="flex-next" href="#">Next</a>
</li>
</ul>
I tried with jquery like this :
var $ = jQuery;
$('li.flex-nav-prev').html('');
$('li.flex-nav-prev').html('');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<ul class="flex-direction-nav">
<li class="flex-nav-prev">
<a class="flex-prev" href="#">Previous</a>
</li>
<li class="flex-nav-next">
<a class="flex-next" href="#">Next</a>
</li>
</ul>
</div>
It's works in snippet but it doesn't work on website.
Thank you so much
To delete just the text of an element try this jquery code:
jQuery('flex-nav-prev > a').contents().filter(function(){
return (this.nodeType == 3);
}).remove();

How to hide and show elements based on current hovered element?

We need to be able to hide and show elements based on currently hovered element. We have tried the following below, but it does not add the is-active class and remove it based on what other element is on hover.
How can we hide and show elements based on the current hovered element?
Goal (based on example below):
when you hover over some under first, display <div class="two" id="some-link">some link</div> using is-active class
when you hover over path under first, <div class="two" id="some-link">some linke</div> should not display (remove is-active class), and <div class="two" id="path-link">path link</div> should display (add is-active class)
Current issue:
is-active class is not being removed when on hover element is changed
$(function() {
$('li#two').hover( function() {
var el_two = $(this);
var el_id = el_two.attr('id');
var el_link = el_two.attr('data-at');
var el_sel = '#'+el_link+'.'+ el_id;
var el_parent = el_two.parent().parent();
el_parent.find('.is-active').removeClass('is-active');
$(el_sel).addClass('is-active');
});
});
.two {
display: none;
}
.is-active {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li id="one">
first
<div class="one">
<ul>
<li data-at="some-link" id="two">
some
</li>
<li data-at="path-link" id="two">
path
</li>
<li data-at="another-one" id="two">
another one
</li>
</ul>
<div class="dropdown">
<div class="two" id="some-link">some link text</div>
<div class="two" id="path-link">path link</div>
<div class="two" id="another-one">another one</div>
</div>
</div>
</li>
<li id="one">
second
<div class="one">
<ul>
<li>
another some
</li>
<li>
another path
</li>
</ul>
</div>
</li>
<li id="one">
third
<div class="one">
<ul>
<li>
third some
</li>
<li>
third path
</li>
</ul>
</div>
</li>
</ul>
First your .find() is using the wrong selector. You have find('is-active') which is an element name selector, you wanted a css class selector ie .is-active.
el_parent.find('.is-active').removeClass('is-active');
Note for removeClass() you don't use a css selector you just use a class name hence why you don't need the dot in that call
Now if you wanted to also have the class removed on hovering out of the element as well then you need to add an event listener for that, and call removeClass from there. .hover() uses a second argument for setting such an event listener callback.
$('li#two').hover(onHoverCallback,function(){
//code for finding the right element
$(el_sel).removeClass('is-active');
})
$(function() {
$('li#two').hover( function() {
var el_two = $(this);
var el_id = el_two.attr('id');
var el_link = el_two.attr('data-at');
var el_sel = '#'+el_link+'.'+ el_id;
var el_parent = el_two.parent().parent();
el_parent.find('.is-active').removeClass('is-active');
$(el_sel).addClass('is-active');
},function(){
var el_two = $(this);
var el_id = el_two.attr('id');
var el_link = el_two.attr('data-at');
var el_sel = '#'+el_link+'.'+ el_id;
$(el_sel).removeClass("is-active");
});
});
.two {
display: none;
}
.is-active {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li id="one">
first
<div class="one">
<ul>
<li data-at="some-link" id="two">
some
</li>
<li data-at="path-link" id="two">
path
</li>
<li data-at="another-one" id="two">
another one
</li>
</ul>
<div class="dropdown">
<div class="two" id="some-link">some link text</div>
<div class="two" id="path-link">path link</div>
<div class="two" id="another-one">another one</div>
</div>
</div>
</li>
<li id="one">
second
<div class="one">
<ul>
<li>
another some
</li>
<li>
another path
</li>
</ul>
</div>
</li>
<li id="one">
third
<div class="one">
<ul>
<li>
third some
</li>
<li>
third path
</li>
</ul>
</div>
</li>
</ul>

jQuery: CSS Display block not working

I'm trying to make a simple dropdown menu, this is my code so far:
HTML
<div id="menuBox">
<ul>
<li>
item 1
<ul class="subs" style="display: none;">
<li>
Sub 1
Sub 2
</li>
</ul>
</li>
<li>
item 1
<ul class="subs" style="display: none;">
<li>
Sub 1
Sub 2
</li>
</ul>
</li>
</ul>
</div>
JQUERY
jQuery(".activate").hover(function(){
jQuery(this).find('.subs').css("display", "block");
}, function(){
jQuery(this).find('.subs').css("display", "none");
});
When I try it on my site nothing happens, what am I doing wrong?
You currently have no elements with an .activate class because your HTML is messed up. Change:
item 1
To:
<a class="activate">item 1</a>
Once you've fixed that, you're still going to have problems as .subs isn't a descendant of .activate. You'll need to use jQuery's next() method to select the .subs element instead:
jQuery(".activate").hover(function(){
jQuery(this).next('.subs').css("display", "block");
}), function(){
jQuery(this).next('.subs').css("display", "none");
});
try
HTML
<div id="menuBox">
<ul>
<li>
item 1
<ul class="subs" style="display: none;">
<li>
Sub 1
Sub 2
</li>
</ul>
</li>
<li>
item 1
<ul class="subs" style="display: none;">
<li>
Sub 1
Sub 2
</li>
</ul>
</li>
</ul>
</div>
JS
jQuery(".activate").hover(function(){
jQuery(this).next('.subs').show();
}, function(){
jQuery(this).next('.subs').hide();
});
DEMO
item 1
Corrected above line as:
<p class="activate" style="cursor:pointer;">item 1</p>

jQuery filter(this.hash) when not an <a> tag

<ul>
<li class="active"><a href="#block1">1<a/> </li>
<li><a href="#block2">2<a/> </li>
<li>3</li>
<ul>
<div id="block1">
Block1
</div>
<div id="block2">
Block2
</div>
$('ul li:has(a)').on('click', function(e){
$(this).closest('li').addClass('active').siblings('li').removeClass('active');
$('*[id^="block"]').hide();
.filter(this.hash).show(); //WRONG//
e.preventDefault();
});
ONLINE SAMPLE
I know this would be easy to make the jQuery to just click on a tag and .filter(this.hash).show(); ,
$('ul li a').on('click', function(){
$('*[id^="block"]').hide().filter(this.hash).show();
}
but I want to know & learn if there is another method to make this works. Thanks!
Your HTML is incorrect, which causes a lot of problems:
You are using <a/> instead of </a>.
You are using <ul> instead of </ul>.
You are using $('*[id^="tab"]').hide(); to try to hide the elements, but the identities are block1 are block2, not tab1 and tab2.
You are using closest("a") to try to find the link, but the link is inside the list item, not surrounding it.
Corrected HTML:
<ul>
<li class="active">1 </li>
<li>2 </li>
<li>3</li>
</ul>
<div id="block1">
Block1
</div>
<div id="block2">
Block2
</div>
Corrected Javascript:
$('*[id^="block"]').hide();
$('*[id^="block"]:first').show();
$('ul li:has(a)').on('click', function (e) {
$(this).addClass('active').siblings('li').removeClass('active');
$('*[id^="block"]').hide();
$($(this).find("a").attr('href')).show();
e.preventDefault();
});
Demo: http://jsfiddle.net/Y2TaT/2/

html / css conditional styling in submenu

I've got a menu-structure generated by an webapplication. The output is as below, and as you can see below the menu goes three levels deep.
<ul id="mainMenu" class="nav">
<li>
<a class="firstitem " href="/products.aspx">Products</a>
<ul id="firstLevel">
<li>
<a class="firstitem " href="/products/category-1.aspx">Category 1</a>
<ul id="secondLevel">
<li>
<a class="firstitem " href="/products/category-1/sub-category-1.aspx">Subcategory 1</a> <!--If ul#thirdlevel exists, I want this text to be bold.-->
<ul id="thirdLevel">
<li>
<a class="firstitem " href="/products/category-1/sub-category-1/myProduct.aspx">My Product</a>
</li>
</ul>
</li>
</ul>
</li>
<ul>
</li>
</ul>
Most menus will be generated as above, but also the one below (without the third level) is an option.
<ul id="mainMenu" class="nav">
<li>
<a class="firstitem " href="/products.aspx">Products</a>
<ul id="firstLevel">
<li>
<a class="firstitem " href="/products/category-1.aspx">Category 1</a>
<ul id="secondLevel">
<li>
<a class="firstitem " href="/products/category-1/sub-category-1.aspx">Subcategory 1</a>
</li>
</ul>
</li>
<ul>
</li>
</ul>
What I want to achieve is that if there is an third level menu I want the text of hyperlink on the second level to be bold. How can I do this? Preferrably with css, otherwise with javascript/jQuery.
I've made a jsFiddle for you: http://jsfiddle.net/danAR/
jQuery code:
$(function() {
$('ul#secondLevel li').each( function(index, item) {
$(this).find('a').toggleClass('aBold', ($(this).find('ul#thirdLevel').length > 0) );
});
});
CSS:
a.aBold {
font-weight:bold;
}
I can't see any easy way of doing this in CSS as your styling is based on a condition. If you using jQuery you could do along the lines of:
var $third = $('#thirdLevel');
if ($third.length)
{
$third.closest('a').css('font-weight', 'bold');
}

Categories

Resources