Jump to a page section and execute a javascript function - javascript

I'm trying to create a FAQ page using Codeigniter + Smarty + javascript
This code:
$(document).ready(function() {
$('dd').hide();
$('dt').click(function(){
$(this).next('dd').slideToggle('slow');
});
$('a.close').click(function (){ $(this).parent('dd').slideUp('slow'); });
});
and my .tpl file is something like
<dl>
<dt>Question one</dt>
<dd>Answer to question one</dd>
</dl>
I am trying to make the page jump to some question based on the url. For example: www.example.com/faq#q11 jumps to question 11. I do this using <span id='q11'> but I now have other problem. The question opens when I enter the url, I mean if I actually go to www.example.com/faq#q11 the browser takes me to the question but I have to click it to toggle the answer.
I want that when I enter the URL to some question, it toggles that answer automatically.

put this is your ready function:
if(window.location.hash)
{
//set the value as a variable, and remove the #
var hash_value = window.location.hash.replace('#', '');
//something like $('#'+hash_value).toggle();
}
edit: not tested but you could probably use $(window.location.hash) because window.location.hash already contains the ID selecter.

This is usually done using route services \ modules, and a lot of MVC frameworks out there come with with route services built in.
If you opt for getting this done without a 3rd party library, you can create a simple router function to handle routes for your website on DOMReady:
function ifRoute( Hashtag, Callback ){
if (window.location.hash.indexOf( Hashtag ) != -1)
Callback();
}
Then, on DOMReady, you would use this like so:
jQuery(document).ready(function(){
ifRoute( 'q11', function(){
//show answer...
//do other cool stuff...
});
});
This is a very simplistic example, and would only help for DOMReady - but I hope it's enough to help out, and at least point you in the right direction.

Related

JQuery create element and execute function upon clicking it

For a web based project, I am using jQuery. In one part of the code, there is data that gets dynamically added to the screen on the client side based on the activity of other users connected to the server. I want to write a code that will allow me to execute a function when a client clicks on the data.
To elaborate a little bit, there is a list which shows which members are online. When a new client connects, his name is added to the list and all other users can see on their screen that he is online. When another user clicks on his name, he sends a message request.
This is the relevant jQuery code:
$('#inc').append("<br><i onclick='accept()'>"+data.plr+"<i><br>")
And the accept function is defined under this block which is within another function, so like
function a(){
$('#inc')....
}
function accept(){
//...
}
However, when the code runs I get an error which says accept() is not defined
How do I solve this problem?
Maybe you can do it in that way...
$('#inc').append("<br><i>"+data.plr+"<i><br>")
$('#inc i:last-child').click(accept);
I did a small CodePen to let you see the code in action
https://codesandbox.io/embed/frosty-jang-fvk3j
I've always done it this way. I find this easier.
$('#inc').append("<br><i class="child">"+data.plr+"<i><br>")
$('.child').on("click",function(){
//your code here
});
You can do it with this way as well :
jQuery(function(){
click_link = $('<a class="" href="#">Click here</a>');
click_link .bind("click", function(){
alert('DO something');
});
$('.your_dom').append(click_link );
});
Write it using jQuery methods:
var $i = $('<i>').text(data.plr).click(function(event) {
//handle here onClick event
}); //or if you have the function already declared just write .click(accept);
$('#inc').append('<br />', $i, '<br />');
https://api.jquery.com/click/

Listen to mousemove only after document loads

I'm trying to use a script called Socialite in my Wordpress site to make social share buttons appear only after the user has moved his/her mouse AND the document already loaded.
I can't get it to work together. My current script, that does work, is:
jQuery(document).one("mousemove", function() {
var social_container = jQuery('.social_buttons');
Socialite.load(social_container);
});
But how do I connect the document load part?
Thanks
Have you tried to put your code into
jQuery(document).ready(function(){/* your code goes here*/});
?
For starters you have a small typo in the first line
jQuery(document).one("mousemove", function() {
You're calling .one("mous...
It should be .on("mous...
Next considerations is that the document ready statement below will happen before images etc have loaded
$(document).ready(function(){
// your code goes here.....
});
using a window load statement like below waits until everything i.e.images have loaded in full
$(window).load(function(){
// code here.....
});
I'm not sure what would suit your needs best as I have no experience with Socialite but hopefully this will give you the answers you need.

Call function when a page link is opened

I'd like to execute a Javascript function myFunc(myParam) automatically when a HTML link is opened, how can I achieve this without breaking compatibility with current browsers?
Notes:
Function name is static whereas parameter is passed dynamically for each link.
I've seen similar questions on SO but personally I would prefer not to use any JS library (if possible), but just my own code
You can use a link like <A href="mypage.html#myParam">, then add this code to this page:
<BODY onLoad="pageLoaded();">
....
function pageLoaded() {
var hash = window.location.hash;
if (hash != "") {
myFunc(hash);
}
}
You can do this very nicely with JQuery. I can't give you an extensive answer (on my mobile phone), but this should be enough to give it a go: How do I run a jQuery function when any link (a) on my site is clicked

Going to a page anchor after load adding transition

I'm quite new at using jquery but learning a bit everyday. I have solved many problems searching this web but I can't seem to find any solution for this one:
The web I'm workign at the moment use quite a lot of page anchors.
I have localscroll and scrollto as jquery libraries.
I animated the transition with this little script:
<script type="text/javascript">
$(document).ready(function () {
$('.scrolllento').localScroll({ duration: 1000 });
});
</script>
and it works fine whatever I add the class "scrolllento" to the cointainer of my links.
Now the problem I have is when a link jumps to an anchor of inside different page. my client has asked me if it's possible to load the page first then move to the anchor with same web transition.
I have been working on it with my little knowdlege and this is what I have atm:
<script type="text/javascript">
$(document).ready(function () {
var nosalto = $(location).attr('href');
if (nosalto.indexOf("HistoriaBMG") > 0) {
$.fn.gotoAnchor = function (anchor) {
location.href = this.selector;
}
$('#historia').gotoAnchor();
}
});
</script>
"HistoriaBMG" is the new page and "#historia" is the anchor I want to go inside that page.
and it seems again that it works...
the problem is I have no idea how to implement now the transition as the class "scrolllento" in the container of the link going to ../HistoriaBMG is ignored.
could anyone help me? thanks so much in advance and excuse my english, hope this question is clear enough.
According to the localScroll docs:
The plugin also adds a function, $.localScroll.hash() , that checks the URL in the address bar, and if there's a hash(#an_id), it will scroll to the element. It accepts a hash of settings, just like $.localScroll. You will likely call it on document ready. Check the regular example to see it in action.
So you simply need to call $.localScroll.hash()on $(document).ready()

load a part of the page without refreshing it

I am pretty new to web design. I just finished my first static website.
What i dont like about it is that the page often reload (each time you change section)
My question is "how to make this kind of nav : http://www.doblin.com/work/#innovation-strategy"
As you see the page doesnt reload when you click on "Set Innovation Strategy / Design, Build + Launch Innovations / Become Better Innovators"
How it s done ?
Is it possible on a static website (html/css/jquery) without sql or so (it may require ajax or ...) ?
Thanks
Taking a look at the code, this page uses some jQuery functions to do this work, check it out:
$(window).hashchange( function(){
var hash = location.hash;
// if a hash has been set
if(hash !== '') {
showContent(hash, origSections);
} else {
// pass in "empty" hash
showContent('', origSections);
}
return false;
});
// call hashchange on initial page load
$(window).hashchange();
// ----------- SHOW CONTENT ----------- //
function showContent(active, all) {
if (jQuery.support.opacity) {
opacity = true;
} else {
opacity = false;
}
This can also be done using CSS3 transitions and animations. Here's a pen based on this Codrops tutorial. I particularly think this is a better approach
But if you want to get dynamic data from somewhere, i advise you to use Ajax(There are some cool jQuery stuff to handle this)
you can use Jquery on your static website. You can go through below link
Jquery
But if you wish to save data and retrieve from server then you need to use Ajax to avoid refreshing page.There are many tutorials available on how to use Ajax
Take a (hard) look at JQuery or Dojo, any of them will be your friend.
Your example uses JQuery.
It can be done on one static page without worries.
Here you have some demos: http://jqueryui.com/tabs/
You can also study jquery on http://w3schools.com/jquery/default.asp

Categories

Resources