Absolute noob here. My aim is to get the bootstrap-tooltip to appear on clicking a bootstrap-glyphicon. But it appears on hover instead. Sharing the jsfiddle here - https://jsfiddle.net/govind91/Lzzgxcro/
This is the html
<span class="glyphicon glyphicon-question-sign" aria-hidden="true" title="Some tooltip text!" data-toggle="tooltip" data-trigger="click" > </span>
Javascript
$(function () {
$('[data-toggle="tooltip"]').tooltip()
});
Kindly let me know where I'm going wrong.
I believe you need to include the Bootstrap JavaScript file in addition to the CSS files, and then it should work!
https://jsfiddle.net/a4WwQ/1082/
$('a[data-toggle="tooltip"]').tooltip({
animated: 'fade',
placement: 'bottom',
trigger: 'click'
});
Related
I'm trying to prevent close of fancybox when someone click outside of fancybox-content area.
HTML:
<div id="banner-message" style="display: none">
<p>Hello World</p>
</div>
JS:
jQuery.fancybox.open(jQuery('#banner-message'), {
clickOutside: false
});
DEMO:
https://jsfiddle.net/xjw4b5jq/
You have to use clickSlide option instead.
fancybox3 works as a slider and you can reposition/resize slider area, therefore there are two similar, but different options.
I have used this config to prevent closing the modal clicking outside.
<!--HTML-->
<a id="enlace" href="#modal">enlace</a>
<div id="modal">
<p>Hola cracks</p>
</div>
// script
$("#enlace").fancybox({
clickSlide: false,
clickOutside: false
});
hope it works for u too :)
I'm using TinMCE to edit site content and need to add a custom piece of HTML via a button using TinyMCE plugin so when i click the button the following content gets added:
<div class="custom">
<a class="header">title</a>
<a class="delete">delete</a>
<p>Some text</p>
</div>
This is all working however I want to add a link so when I click delete the div gets removed from the TinyMCE content.
Is it possible?
Thanks
If you are using tinyMCE 4.X, it can be done using the <> source code editor option under tools. when you open it, you will see the html source code for what you have entered in the tinyMC editor.
<div class="custom">
<a class="header">title</a>
<a class="delete" onclick="this.parentNode.remove();">delete</a>
<p>Some text</p>
</div>
just make sure you have added anchor's onclick as extended_valid_elements
e.g.
tinymce.init({
...
extended_valid_elements : "a[onclick]"
... });
for more.... check this out :
http://www.tinymce.com/wiki.php/Configuration:extended_valid_elements
I need to show details on the popup. I don't have any idea how to do this. I need to do it in a MVC3 Razor view.
my Controller-
public ViewResult ViewDetail(Int32 id)
{
var q = from p in db.accs
where p.id == id
select p;
return View(q.FirstOrDefault());
}
my View-
<td># Html.ActionLink("View Detail", "ViewDetail", new { id=item.id }) </td>
use the Jquery UI ModalForm to show up your data.
Say you want to display the following in Modal pop-up of jquery .
<div id="displayinmodal">
<input type="file" id="file" name="file" />
<input type="submit" id="submitdata" value="Upload" />
</div>
Now write your jquery like this.
<script>
$(document).ready(function(){
$("#displayinmodal").dialog({ //displayinmodal is the id of the div you want to display in modal popup
autoOpen: true
});
});
</script>
That's it. you should get Modal popup in your browser.
Hope this helps
This kind of task isn't really what ASP.NET MVC / Razor does. Consider using a Javascript library like JQuery UI Dialog. You have to add several of the JQuery UI scripts to your page, but the payoff is a very simple API; you can create a basic dialog out of any HTML element (say with id mydiv) with one line of code:
$( "#mydiv" ).dialog();
And of course there are customizations and themes you can apply.
Of course, you could simply use the Javascript:
alert("my details here");
to get a basic modal popup, but I'm guessing that's not what you want.
If you want a simple no frills modal (with not much content) you can use a JavaScript alert like so:
alert('Hello from a modal popup');
If you would like a prettier option a common solution is to use jQuery UI's dialog which allows for a modal option. Take a look here for a demo of what you get with this option:
http://jqueryui.com/demos/dialog/#modal
The code is pretty simple; the below should do everything for you using Google's CDN as a source for the scripts and stock jQuery UI CSS:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.js" type="text/javascript"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(function() {
$( "#details" ).dialog({
modal: true
});
});
</script>
<div id="details">
Hello from a modal popup
</div>
I'm trying to use jQuery show and hide which seem to work ok in Safari, when I try it on the iPhone, it doesn't work at all. Here is my code;
<script type="text/javascript">
$("#showSearch").click(function () {
$("#searchform").show(1000);
});
</script>
It's a button that when clicked, will show the search form. The form doesn't show on iPhone. Also when I add $('#showSearch').remove(); in there, it doesn't get removed, even if I add a function as the second parameter of show() it still doesn't hide the button.
Thanks for your help.
jQuery Docs:
http://api.jquery.com/show/ (Shows)
http://api.jquery.com/hide/ (Hides)
http://api.jquery.com/remove/ (Deletes)
http://api.jquery.com/toggle/ (Show/Hide)
Live Example:
http://jsfiddle.net/qQnsj/1/
JS
$('#viewMeButton').click(function() {
$('#viewMe').toggle(); // used toggle instead of .show() or .hide()
});
$('#removeMeButton').click(function() {
$('#removeMe').remove();
});
HTML
<div data-role="page" id="home">
<div data-role="content">
<div id="viewMe">
Hello I'm in the div tag, can you see me?
</div>
<br />
<button id="viewMeButton">Show / Hide</button>
<br />
<div id="removeMe">
Click the button to remove me
</div>
<br />
<button id="removeMeButton">Remove Me</button>
</div>
</div>
I know this is an old question, but I recently had a similar problem. Hopefully this will help someone else if they find this question, too.
I was trying to hide a set of ui-block-* elements in a JQM grid. On the same grid cells, my media query for the iPhone was setting display: block !important. That was winning.
The !important directive was unnecessary in my case and when I removed it the calls to hide() and show() began working as expected.
I'm using the following script to create a toggle effect for opening and closing div's.
<script type="text/javascript" src="/mainmenu/js/jquery.min.4.1.2.js"></script>
<script type="text/javascript">
jQuery(document).ready(function()
{
jQuery(".content").hide();
jQuery(".heading").click(function()
{
jQuery(".content").hide();
jQuery(this).next(".content").slideToggle(500);
});
});
</script>
<div class="main_text_faq"
<p class="heading">Header-1 </p>
<div class="content">Lorem ipsum</div>
<p class="heading">Header-2</p>
<div class="content">Lorem ipsum</div>
<p class="heading">Header-3</p>
<div class="content">Lorem ipsum</div>
</div>
Now I can't just seem to figure out how I can let Header 1 to always be open and to have Header 2 open when entering the content.
Any ideas how I can start coding this? I am in the process of learning how to use Jquery so please forgive me for not having anything to show for what I allready tried to fix my "problem"
Thanks in advance.
Regards!
If I've understood your question correctly, you want the first .content element to stay visible when the others are initially hidden. To do that you can use the :not and :first pseudo-selectors to exclude the first element:
jQuery(".content:not(:first)").hide();
Here's a working example.