I have a simple jquery script that shows and hides div block:
<script type="text/javascript">'
$(document).ready(function(){
$(".slidingDiv").hide();
$('.show_hide').click(function(){
$(".slidingDiv").slideToggle();
});
});
</script>
<a class="show_hide" href="#">Show/hide</a>
<div name="gohere" class="slidingDiv">
...
</div>
It's working fine, but if the URL contains #gohere I want to automatically show this div and hide it only if .show_hide is clicked.
Set the divs ID to be gohere, then you can do:
$('.show_hide').click(function(){
$($(this).attr('href')).slideToggle();
});
since your href attribute will contain #gohere, the selector for the slidetoggle will end up being #gohere, which corelates to your divs ID.
EDIT:
for the first part of your question, you can get the current hash tag from window.location.hash.
if (window.location.hash.length > 0) {
$(window.location.hash).show();
}
You should probably put some better error checking in there, but it should work.
Related
How can I use jquery to change the id of a div acting as a jquery mobile popup as well as the href of the anchor pointing to the popup?
In my webapp I have an anchor that, when clicked, brings up a jquery mobile popup div all of which I'm inserting dynamically. In any instance of the webapp, I don't know how many times this code will be inserted. Therefore, my understanding is that I need to be able to dynamically create a unique id for the jquery mobile popup div and set the href of my popup icon.
I am not currently succeeding at dynamically changing the id and href. I've created the following test (JSFiddle Test).
Here is my sample html:
<div class="phone1">
<p class="textLeft"> <strong>Number: </strong><span>(555)555-5555</span>
Learn more
</p>
<div id="myPopup" data-role="popup" class="ui-content" data-theme="a" style="max-width:350px;">
<p class="flagText">This number has been flagged as incorrect</p>
</div>
</div>
Change href property
Here is my sample javascript / jquery:
$('#changeButton').click(function () {
alert("Handler for .click() called.");
$('.phone1 > a').prop('href', 'myNewPopup');
$('#myPopup').attr('id', 'myNewPopup');
});
Thank you for your help in advance!
As your anchor is not a direct child of .phone1 but rather a grandchild, the > selector does not work. Also the href needs the # symbol:
$('.phone1 a').prop('href', '#myNewPopup');
Technically you should also use prop to update the id as well:
$('#myPopup').prop('id', 'myNewPopup');
Updated FIDDLE
Are you sure you need to do this. After dynamically inserting the popup the first time, you could just update it each successive time by testing if it exists in the DOM first:
if ($("#myPopup").length > 0){
//update
} else {
//create
}
I try to make the items of a list draggable, but it doesn't work. jQuery doesn't seem to add the ui-draggable class, or maybe Angular removes it.
Javascript
$('.results_video').draggable({
});
HTML
<div class="results_video" ng-repeat="video in results.list">
{{video.title}}
</div>
Note that if I just write the following html, it works
<div class="results_video"></div>
Any suggestions?
I have found the solution. I need to make these divs draggable after they have been loaded. In my case:
var VideoCtrl = function ($scope){
$scope.$watch('search', function(){
//Some code that updates the divs
$('.results_video').draggable();
});
};
I have jQuery UI tabs set up, but a problem that I'm having with links to different pages is that they load all contents of the page into the tab. This includes the footer, header, and other navbars that I don't want in the tab. What if I would only like to load a single ID from that page?
My tabs are set up this way:
<div id="mytabs">
<ul>
<li>Awesome page</li>
<li>Foo</li>
</ul>
</div>
Nothing much going on in the jQuery...
$(function() {
$( "#mytabs" ).tabs();
});
Let's say this is the html of "awesomepage" (that the first link targets):
<html>
<head>
<title>awesome page</title>
</head>
<body>
<div id="header">bla</div>
<div id="awesomeness">awesomeness!</div>
<div id="footer">fdsfd</div>
</body>
</html>
...And I only want the tab to load #awesomeness from the page. How would I go about doing this? I've read into some guides that do that by adding a data-target="#youridhere" attribute to the HTML, but I'm still confused on how to implement the javascript. It seems like this is a convenient solution, as I won't be targeting the same ID in every page. Any clues on how to get the javascript working?
Thanks in advance!
The function that allow to load partial code of the response is the $.load() function.
Unfortunately, the tabs() feature does not use this function but use $.ajax instead.
You can try this solution:
You can try to stop the default processing on the beforeLoad callback and manage your ajax call with the $.load() method.
(base on the 1.9 documentation, you may should adapt)
$('#tabs').tabs({
// Callback run when selecting a tab
beforeLoad: function(event, ui) {
// If the panel is already populated do nothing
if (ui.panel.children().size() > 0)
return false;
// Make your own ajax load (with fragment feature)
ui.panel.load(ui.tab.attr('href') + ' #yourFragment');
// stop the default process (default ajax call should not be launched)
return false;
});
NOTICE: I'm not sure about extracting the URL with ui.tab.attr('href'), check before what object is ui.tab, but it should be easy to retrieve the href parameter.
Good luck
Got the solution :) Using one of the answers as a reference point, the tabs can now load a single element specified in the data-target attribute. Here is the modified version:
$(function() {
$('#tabs').tabs(
{
beforeLoad: function(event, ui) {
if (ui.panel.children().size() > 0)
return false;
ui.panel.load($('a', ui.tab).attr('href') + $('a', ui.tab).attr('data-target'));
return false;
}
});
});
I want to load the content of a page that is in another folder (eg: "files/pages/example.html") for the div container by clicking on the button in jQuery Mobile!
How to do it?
<div data-role="page">
<div id="container" data-role="content"><button id="clickButton">Click me!</button></div>
</div>
The $.mobile.loadPage is the method you need. It allows you to load an external html file and insert it into the dom. Default for this method is to load it as an entire page, so you have to specify the options to load it into a dom element. This is an example (and untested) code:
$('#clickButton').on("click",function(){
$.mobile.loadPage("theURLofThePage",{pageContainer: $('#container')})
});
now, don't forget about the crossDomain security problem. I managed to make this work in firefox by adding:
$("#landingPage").live('pageinit', function() {
jQuery.support.cors = true;
$.mobile.allowCrossDomainPages=true;
});
Also, the page you are loading must be wrapped in a data-role=page div (let's say it has id='secondPage'). After the load, trigger on the data-role=page with id=secondPage div:
$('#secondPage").trigger('pagecreate');
You know how when you have your mouse over a link, in most browsers, it shows the link in the lower left corner (aka chrome) or in the status bar? How can I disable this?
The only way to do this is to remove the data in 'href', and change it to a javascript onclick where you set the window.location to the url you want.
Go To SO
becomes
<a style="cursor: pointer" onclick="javascript: window.location = 'http://www.stackoverflow.com/';">Go To SO</a>
another idea: use a redirector.
Set the link to your own page (aspx) and in that page you do a Response.Transfer. When using aspx, you can use attributes (in the querystring) if you like, to use it for multiple links. This way the user still knows it is a link, but can't see the actual URL when hovering.
I got the same issue today .. and here is a out of the box way to solve it:
Just replace the <a> with a <span> and hide the address in a hidden component,
Then use Jquery to create the page redirect / Ajax.
HTML:
<span class="fake-link" >
<span class="url" style="display:none;">www.my-url.com</span>
Go to My-URL page
</span>
Jquery:
$(function(){
$('.fake-link').on('click', function(e){
var url = $(this).find('.url:first').html();
window.location = url;
});
});
Change the onclick event:
Link
<script type="text/javascript">
function changeOnClick() {
document.getElementById("linkid").onclick=function(e) {
location.href="http://www.your-site.com";
return false;
}
}
window.onload=changeOnClick;
</script>
You can change the "#" to whatever you want the status bar to show.