Foundation Dropdown vertical offset not working - javascript

I cannot make the vOffset working in Foundation. I followed the documentation but I am failing in this simple task. In foundation we can either specify data-v-offset attribute on html or pass vOffset to options while initializing.
Fiddle I made:
https://jsfiddle.net/amir734jj/exyy4eLz/
Code for completeness:
<div class="container">
<button class="button" type="button" data-toggle="example-dropdown">Top Aligned</button>
<div class="dropdown-pane right" id="example-dropdown" data-dropdown>
Just some junk that needs to be said. Or not. Your choice.
</div>
</div>
$(document).ready(function() {
var element = new Foundation.Dropdown($("#example-dropdown"), {
hover: true,
vOffset: 150
});
$("#example-dropdown").foundation();
});
Update: my final goal is to make the bottom of Dropdown be at the same level as the button (i.e. use vOffset by $("#example-dropdown").height())

You have to use data-option attribute like this to achieve the results. Refrence here .
How to use data-option method in the html:
1. To use any attribute just dont use any hyphen and data text in the initializaion.
2. To use multiple attributes use semicolon as separator.
<div class="dropdown-pane right" id="example-dropdown" data-dropdown data-options="vOffset:100; hover: true;">
Just some junk that needs to be said. Or not. Your choice.
</div>
$(document).foundation();
.container {
margin: 15rem;
margin-top:0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/js/foundation.js"></script>
<div class="container">
<button class="button" type="button" data-toggle="example-dropdown">Top Aligned</button>
<div class="dropdown-pane " id="example-dropdown" data-dropdown data-options="vOffset:100;hOffset:80; hover:true; ">
Just some junk that needs to be said. Or not. Your choice.
</div>
</div>

Related

Bootstrap collapse function difference between bootstrap v3.3.5 and v2.1.1

I am using bootstrap v3.3.5 in my application and wanted to include collapse function such that, when user clicks on a link, div below it toggles. Referring to answer in this Can you specify a "data-target" for Bootstrap which refers to a sibling DOM element without using an ID? I was able to achieve similar result as my requirement, in the below fiddle link
https://jsfiddle.net/szp1cg0k/, which is using bootstrap v2.1.1.min.js and v2.1.1.min.css
But in the same fiddle when I include bootstrap v3.3.5.min.js and v3.3.5.min.css reference the toggle/collapse functionality doesn't work here, neither throws any error
updated JS https://jsfiddle.net/ohoLxap6/2/
html code:
<fieldset class="fsStyle">
<legend class="legendStyle">
<a data-toggle="collapse-next" data-target=".demo" href="#">Activity Log Filter Criteria4</a>
</legend>
<div class="demo" >
<div class="col-md-2">
<label for="activity_from_date" class="labelStyle">Activity From Date:</label>
</div>
<div class="col-md-4">
<input name="fromDate" maxlength="10" size="11" tabindex="59" value="" onblur="javascript:DateFormat(this,event,true);" class="textInput" id="activity_from_date" type="text">
</div>
</div>
</fieldset>
script:
$('body').on('click.collapse-next.data-api', '[data-toggle=collapse-next]', function() {
console.log($(this).parent());
var $target = $(this).parent().next()
console.log($target);
$target.data('collapse') ? $target.collapse('toggle') : $target.collapse()
});
Can anyone give me some hint where I am going wrong ?
UPDATE:
I am aware of the collapse function of bootstrap, I have multiple divs in my form and I want to include collapse function on most of the divs. One way to achieve this is
<div data-toggle="collapse" data-target="#demo1">
<div id="demo1">
<p>demo 1 ......</p>
</div>
<div data-toggle="collapse" data-target="#demo2">
<div id="demo2">
<p>demo 2 ......</p>
</div>
But I dont want to use ids, instead I want to specify class. The reason being, I have jqtree at backend and I have to include clone function as well, so using ids would mean after cloning I need to take care of ids of cloned child node div. Hence want to use class instead , something like below
<div data-toggle="collapse" data-target=".demo">
<div class="demo">
<p>demo 1 ......</p>
</div>
<div data-toggle="collapse" data-target=".demo">
<div class="demo">
<p>demo 2 ......</p>
</div>
Got this working. I have updated the fiddle accordingly. https://jsfiddle.net/ohoLxap6/3/
$('body').on('click.collapse-next.data-api', '[data-toggle=collapse-next]',
function() {
//console.log($(this).parent());
var $target = $(this).parent().next()
console.log($target);
$target.data('bs.collapse') ? $target.collapse('toggle') :
$target.collapse()
});
Why would you write your own code for a existing Bootstrap function? Following code is an example of the latest Bootstrap version collapse method:
<button class="btn" data-toggle="collapse" data-target="#demo">Collapsible</button>
<div id="demo" class="collapse">
Some text..
</div>
Docs: http://getbootstrap.com/javascript/#collapse
UPDATE:
According to your new question, collapsing using classes, I have created a custom script:
$('[data-toggle="collapse"]').click(function() {
var $target = $(this).data('target');
var $target = $($target);
$target.data('bs.collapse') ? $target.collapse('toggle') :
$target.collapse()
});
Now all classes inside the data-target attribute will get toggled. https://jsfiddle.net/ohoLxap6/4/

jquery multiple show/hide buttons

I am trying to convert a lot of JavaScript to jQuery and I have a task that I believe has a simple jQuery shortcut, but I don't know what it is and I haven't been able to find an example.
I have a page with many toggled divs. They are in the form that follows where ### is a unique integer for each pair.
<button class='togglebutton' onclick="toggle('div###');">+</button>
<div id='div###'>...some text...</div>
I'd assume the shortcut is something like:
$('.togglebutton').onclick(function() {
var divid = '#div'+?????;
$(divid).toggle();
});
My theory... if I give each button an id, such as 'button###', then I can use substring to get the value after the word 'button', something like:
$(this).id().substring(6,3);
Obviously, that didn't work. So, I figured that I should ask if there is a simple shortcut in jQuery to pair a showhide button with a separate div.
You may want to do this no matter where your div locates http://jsfiddle.net/tg5op333/25/
HTML
<button class='togglebutton' data-id="1">+</button>
<div id='1' style="display:none">...some text...</div>
<button class='togglebutton' data-id="2">+</button>
<div id='2' style="display:none">...some text...</div>
<button class='togglebutton' data-id="3">+</button>
<div id='3' style="display:none">...some text...</div>
<button class='togglebutton' data-id="4">+</button>
<div id='4' style="display:none">...some text...</div>
JS:
$('.togglebutton').click(function() {
$("#"+ $(this).data('id')).toggle();
});
If the HTML is ordered like you show in your question, then use:
$('.togglebutton').click(function() {
$(this).next().toggle();
});
$('.togglebutton').click(function() {
$(this).next().toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button class='togglebutton'>+</button>
<div id='div1'>...some text...</div>
<button class='togglebutton'>+</button>
<div id='div2'>...some text...</div>
<button class='togglebutton'>+</button>
<div id='div3'>...some text...</div>
Two ways:
1) You can use some common class attribute to all dives and select all using that.
Or
2) Or else you can use this wildcard selector :
$("[id^=div]")
It gives you all divs whose id starts with div.

Jquery script is it possible to make smaller or more effecient

Ok so I have a webpage with six icons followed by a header and button for each. Currently I have it working as when you hover over img-1, header-1 and button-1 all hover the same color so on for the following. I was wondering as my jquery im still new and havent mastered it by any means but I call out every single change I want, I was wondering if there is a way to consolidate it or make it easier if I want to change it but still have it hover and change colors to the corresponding divs
Ive set up a snippet of what I have on jfiddle an as you can see on my jquery list i have a long list of stuff doing the same thing
Thanks any tips or tricks would be greatly appreciated to help me in any future sites I write
http://jsfiddle.net/udegrbnr/
<div style="width:50%;float:left;">
<div class="container-1">
<div class="visible-1 upgradea-1 upgradea imgnone-1"><img src="http://placehold.it/250/000000/000000" alt=""></div>
<div class="hidden-1 upgradea-1 upgradea otherimg-1"><img src="http://placehold.it/250/db232b/000000" alt=""></div>
</div>
<h3 class="upgradea upgrade otherimg" style="text-align: center;">Upgrade Alert</h3>
<div class="aligncenter"><a class="button small button custom fusion-button button-flat button-square button-small button-custom button-1 buttonshadow-no button-upgrade otherimg" target="_self" href="#"><span class="fusion-button-text">Learn More</span></a></div> </div>
<div style="width:30%;float:left;">
<div class="container-1">
<div class="visible-1 contracta contractnone-1"><img src="http://placehold.it/250/000000/000000" alt=""></div>
<div class="hidden-1 contracta contractimg-1"><img src="http://placehold.it/250/344da1/000000" alt=""></div>
</div>
<h3 class="contracta contractimg" style="text-align: center;">Contract End Alert</h3>
<div class="aligncenter"><a class="button small button custom fusion-button button-flat button-square button-small button-custom button-3 buttonshadow-no contracta contractimg" target="_self" href="#"><span class="fusion-button-text">Learn More</span></a></div></div></div>
and here is all 6 divs i have for my jquery as i feel its alot and can be simplified hopefully
Like i have seen the "this" command but dont know if that could be applied
$(function(){
$(".upgradea , .button-upgrade").hover(function(){
$(".upgradea , .button-upgrade").toggleClass("changecolor");
});
$(".button-upgrade-1").hover(function(){
$(".button-upgrade-1").toggleClass("changecolor-1");
});
$(".flexa ").hover(function(){
$(".flexa").toggleClass("changecolor-2");
});
$(".contracta ").hover(function(){
$(".contracta").toggleClass("changecolor-3");
});
$(".mileagea ").hover(function(){
$(".mileagea").toggleClass("changecolor-4");
});
$(".warrantya").hover(function(){
$(".warrantya").toggleClass("changecolor-5");
});
$(".otherimg").hover(function(){
$(".otherimg-1").toggleClass("changeimg");
});
$(".otherimg").hover(function(){
$(".imgnone-1").toggleClass("hidden-1");
});
$(".fleximg").hover(function(){
$(".fleximg-1").toggleClass("changeimg");
});
$(".fleximg").hover(function(){
$(".flexnone-1").toggleClass("hidden-1");
});
$(".contractimg").hover(function(){
$(".contractimg-1").toggleClass("changeimg");
});
$(".contractimg").hover(function(){
$(".contractnone-1").toggleClass("hidden-1");
});
});
I don't see any reason not to use CSS for all of this. If you target the children of a hovered parent, you can style it however you like. For example:
.parent:hover h3, .parent:hover .child a {
color: red;
}
This CSS could absolutely be further cleaned up, there are a lot of redundant CSS rules and unnecessary containers, I just didn't want to stray too far from the example you provided.
http://jsfiddle.net/qk53a5q4/
Yes, re-think your CSS.
Instead of having a specific class for each hover/changeimg/changecolor state, have one class that states what the thing is then one class for each state.
HTML:
<button class="button-1 hover">Button 1</button>
<button class="button-2 hover">Button 2</button>
CSS:
.button-1.hover { /* styles */ }
.button-2.hover { /* styles */ }
jQuery:
$('.button-1, .button-2').hover(function() {
$(this).toggleClass('hover');
});

Refresh an element so its new tooltip shows (in jQuery/Javascript)

I have an html element which is using bootstrap tooltip to show a title when hovering over it. However, when you click this element I'm changing the tooltip, but the new tooltip isn't showing until I remove the mouse from it and re-hover over the element again.
I want the tooltip to be shown instantly when said button is clicked. How can I achieve this? Is there a way to "refresh", in lack of better words, an html element?
try this way
Demo :
http://jsfiddle.net/dreamweiver/9z404crn/
$(document).ready(function() {
$('#example').tooltip();
$('#example').on('click', function() {
$(this).attr('data-original-title', 'changed tooltip');
$('#example').tooltip();
$(this).mouseover();
});
});
h3 {
margin-top: 50px;
}
<h3>
Sensors Permissions
<i class="icon-info-sign" data-toggle="tooltip" title="first tooltip" id='example'></i>
</h3>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet" />
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
Note:
Above logic works only with Bootstrap version 2.3.2 and below, however, the solution provided by #NabiK.A.Z's would work with the latest versions of Bootstrap lib.
Happy Coding:)
You can use this code:
var newTooltip = 'Changed this tooltip!';
$('#example').attr('data-original-title', newTooltip).parent().find('.tooltip-inner').html(newTooltip);
I test it with bootstrap 3.3.4
You can see it here:
http://jsfiddle.net/NabiKAZ/a4WwQ/1029/
$('a[data-toggle="tooltip"]').tooltip({
animated: 'fade',
placement: 'bottom',
});
$('.mytooltip').hover(function() {
$('.mytooltip').tooltip('show');
});
$('.mytooltip').click(function() {
var newTooltip = 'Changed this tooltip!';
$(this).attr('data-original-title', newTooltip).parent().find('.tooltip-inner').html(newTooltip);
});
.cart {
overflow: hidden;
padding: 10px 3px;
background: yellow;
}
<div class="cart">
<a data-toggle="tooltip" title="add to cart" class="mytooltip">
<i class="icon-shopping-cart"></i>
</a>
</div>
<br>
<div>
<a data-toggle="tooltip" title="add to another cart" class="mytooltip">
<i class="icon-shopping-cart"></i>
</a>
</div>
<!-- Post Info -->
<div style='position:fixed;bottom:0;left:0;
background:lightgray;width:100%;'>
About this SO Question: <a href='http://stackoverflow.com/q/19630749/1366033'>How to make bootstrap 3 tooltip work with parent div with overflow:hidden?</a><br/> Find documentation: <a href='http://getbootstrap.com/javascript/#tooltips'>Bootstrap 3.0 ToolTips</a><br/> Fork This Skeleton Here <a href='http://jsfiddle.net/KyleMit/kcpma/'>Bootrsap 3.0 Skeleton</a><br/>
<div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
For me in bootstrap 4 this worked:
$("#xxx").tooltip("dispose").attr("title", "New Tooltip").tooltip()
It's 2021 and with Bootstrap 5(BS5) all answers on this here didn't help me. Most answers above updated the content of the $(element).parent().find('.tooltip-inner').html("This is a test"); generated by the tooltip plugin. However with BS5 the generated template for the tooltip has a unique ID which can be used to update the tooltip.
This example demonstrates a simple scenario: when the .copy_queue_id div is clicked, queue ID from its attribute is copied and hence the the tooltip is updated to notify the user
HTML Markup:
<div class="cursor-pointer text-primary copy_queue_id" data-queueid="123456" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Click to copy"> 123456</small>
JS - JQuery
$(document).on('click', '.copy_queue_id', function(){
let node = $(this);
let id = node.data('queueid');
navigator.clipboard.writeText(id);
let tooltipid = node.attr('aria-describedby');
$("#"+tooltipid).find('.tooltip-inner').html('ID Copied!!');
})
Tested & works in BS5
Hope this helps others :)
Sure you just have to change the tooltips text within the onclick event
$('.tooltip-inner').html("This is a test");
I've created a jsfiddle for you as a demonstration http://jsfiddle.net/a4WwQ/59/
Currently it will change all visible tooltips text which isnt really a problem since you arent going to show more than one at at a time. That being said, you should consider modifying the code to point to the closest tooltip.
hope it helps!
in case you are looking to refresh the contents;
$('#example').tooltipster('content', 'i am superman!');
2021, Bootstrap 5: update this property data-bs-original-title.
You can also use Razor / Blazor with this, like this:
var title = propExamples.FirstOrDefault(q => q.Key == selectedType.Id).Value;
<div class="col-sm-2">
<img class="zoom-on-hover cursor-pointer fit-image grayout"
src="/lib/bootstrap-icons-1.5.0/info-lg.svg"
data-bs-toggle="tooltip" data-placement="bottom"
data-bs-original-title="#title" />
</div>

if jQuery element hasClass() change different element link text

I am using a jQuery function to add/remove a class to the clicked element, which works just fine. However when that element is clicked, I am trying to change the text of an HTML link and I cannot seem to get it working. The HTML link is located within the <span> element further down the page.
When <button id="people"> hasClass('user_view_active') the HTML link should display "People" when <button id="jobs"> hasClass('user_view_active') the HTML link should display "Jobs".
<script type="text/javascript">
$(document).ready(function() {
$('button').click(function(){
$('button').each(function(){
$(this).removeClass('user_view_active');
});
$(this).addClass('user_view_active');
});
if ($('#people').hasClass('user_view_active')){
$('.title').find("a").attr("href").text(text.replace('People'));
}else{
$('.title').find("a").attr("href").text(text.replace('Jobs'));
}
});
</script>
</head>
<body>
<div id="container">
<header>
<img src="images/header-name.png" width="200px" style="display: inline; margin-bottom: -10px;"/>
<button id="jobs" class="user_view">Jobs</button>
<button id="people" class="user_view_active user_view">People</button>
<div class="header_search_wrapper">
<form action="" method="POST">
<textarea class="header_search" name="app_search" placeholder="Search people, jobs, or companies" style="width: 430px;"></textarea>
<input type="submit" class="share_btn" value="Search">
</form>
</div>
</header>
<div id="main" role="main">
<!--! begin app content -->
<div class="right_sidebar">
<span class="right_title">Connection Suggestions</title>
</div>
<span class="title">Recent Updates >> People</span>
To replace the text within a link you can use the jQuery .text() function. This function can also get the text value and also set the text value - as is shown in the example below -
if ($('#people').hasClass('user_view_active')){
$('.title').find("a").text('People');
}else{
$('.title').find("a").text('Jobs');
}
This code would have to be wrapped in the callback function of the click event to work -
$(document).ready(function() {
$('button').click(function(){
$('button').removeClass('user_view_active');
$(this).addClass('user_view_active');
if ($('#people').hasClass('user_view_active')){
$('.title').find("a").text('People');
}else{
$('.title').find("a").text('Jobs');
}
});
});
Now each time the button is clicked, you can check for the existence of the user_view_active class on the #people element.
Okeydokey ?
Are you sure those are the right tags ?
<span class="right_title">Connection Suggestions</title>
Are you sure an <a> element inside a <button> element is a good idea?
<button id="jobs" class="user_view">Jobs</button>
role="main" is'nt a valid attribute, but will probably work anyway.
This just seems easier:
$(document).ready(function() {
$('button').on('click', function(){
$('button').removeClass('user_view_active');;
$(this).addClass('user_view_active');
$("a", ".title").text(this.id);
});
});
FIDDLE
Try this way:
$('#people').toggleClass('user_view_active').html($('#people').hasClass('user_view_active')?'People':'Jobs');

Categories