We Keep Coding

Create Back browser event using Jquery

I want to create a back button browser event using jquery. I did this code but it doesnt appear to work
$(document).ready(function() {
$('.back').click(function() {
window.history.back();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Back

The href="#" will add a new item to history, so window.history.back(); will "return" to the page where the link was clicked. You need to prevent the link from directing to # with this:
$( document ).ready(function() {
$('.back').click(function(e) {
e.preventDefault();
window.history.back();
});
});

you are missing to specify event as function argument, try this one..
$(".back").click(function(event) {
event.preventDefault();
history.back(1);
});
This might solve your problem.

preventDefault not working as expected

I would like to remove the tag redirection hyperlink. Currently clicking it opens a modal but I do not want to redirect the browser. I tried preventDefault and it does not work for me.
I'm working with C# MVC. It might be that I overload elsewhere? Or are there other solutions to avoid redirecting? As a last resort I would not like to change the element to a span, div or button.
algo.cshtml:
<a id="modalAboutButton">Ir a about </a>
<div id="aboutModal" class="reveal-modal" data-reveal></div>
app.js
$(document).ready(function () {
$(document).on('click', '#modalAboutButton', function (e) {
e.preventDefault();
var $modal = $('#aboutModal');
$.get('/About/Index2', function (resp) {
$modal.html(resp).foundation('reveal', 'open');
});
});
});

Simple example
Google
Js
$('a').click( function(e) {
e.preventDefault();
alert("preventDefault");
});
Fiddle example
I hope it will help you.

getting a particular div in to view or scroll into view

I am trying to add a feature to my website in a way that when i click a link i want a particular div element to come in to view for a user.. ive tried the code
$(".testClick").live("click",function(e){
e.preventDefault();
// Call the scroll function
goToByScroll("indID13");
});
function goToByScroll(id){
// Reove "link" from the ID
id = id.replace("link", "");
// Scroll
$('html,body').animate({
scrollTop: $("#"+id).offset().top},
'slow');
}
but this doesnt work... is it possible to achieve this feature with out any plugin by pure jquery itself.. or should i be using any plugin...
I will add a sample of what ive tried. the jsfiddle link http://jsfiddle.net/xFu3M/
and try this one toooo http://jsfiddle.net/xFu3M/6/ is this a bug..im trying to get div 1 in to view and its already in view,, so when i click the link it shows some other div

You just had a syntax error, change the .live to .on as the .live has depreciated in later versions of jQuery use this and it will work:
$(".testClick").on("click",function(e){...
See this edited fiddle jsFiddle

Try
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$(".wrapper").css({"width" : $(window).width() , "height" : $(window).height()});
$(".testClick").on("click",function(e)
{
e.preventDefault();
goToByScroll("indID13");
});
});
function goToByScroll(id)
{
id = id.replace("link", "");
$('html,body').animate(
{
scrollTop: $("#"+id).offset().top
},'slow');
}
</script>
You click event code was not surrounded in document.ready.
Also use .on instead of .live because it already depreciated from now on.

A click function not working

my a click jquery function is not working, it just doesn't give any errors at console at all too.
Here is the link -
Edit
and here is the click function
$('a').click(function() {
var item = $(this).attr("id");
alert(item);
return false;
});
It doesn't popout the alert box, nor it does show me error in console.
Okay, someone asked for more info -
The link is added with jquery, by pressing button, and as id it takes one of the input fields value and inserts it as link with id from input field. There are no duplicate ids, all javascript scripts are located at the end of head tag, and the a click function is located last in part.

Based on your edit that the <a> tag is being inserted dynamically, you'll need to use jQuery's .on() (jQuery version 1.7 and later) or .live() method to attach the click handler.

This code should work, so I suppose there is some other error before this code runs that prevents correct Javascript execution.
Edit: OR the DOM is not yet ready when you insert the Javascript code. Then you should use
$(function() {
$('a').click(function() {
var item = $(this).attr("id");
alert(item);
return false;
});​
});

Are you wrapping it on the ready event or after the element has been displayed? If so then it should work;
http://jsfiddle.net/sWeRf/

Either place this code after the Edit on the page, or put it in the head with $(document).ready(function() { //Place code here. });

Can you try replacing your JS code with the following (put between the HEAD tags)
<script type="text/javascript">
$(document).ready(function(){
$('a#lang').click(function(){
alert($(this).attr('id'));
});
});
</script>

Are you checking the document is loaded before applying your JQuery click handler?
e.g.
$(document).ready(function() {
$('a').click(function() {
var item = $(this).attr("id");
alert(item);
return false;
});
});

Instead of using document.ready you can use an anonymous function that does the same thing.
Like this:
$(function() {
$('a').click(function() {
var item = $(this).attr("id");
alert(item);
return false;
});
});

To remove the item do this:
$('#language_c').remove();

Toggle text with function called with onclick

my question is a short one but I couldn't figure it out by myself. I've got a function like -> http://jsfiddle.net/gtU56/ . I'm calling a javascript-function with an event-listener(onclick) in my html-code. The function itself is more complex but I need the last snippet. By clicking 'Show More' the text should change. Why won't the text change?

Because the toggleText function isn't available when the html code is rendered.
In other words the function isn't set until the page is ready so the onclick function doesn't reference anything.
Either have the function like here http://jsfiddle.net/gtU56/2/
or have it in the head of the page because its needs to be ready immediately
If you want it to wait for the ready state you can do the following and remove the onclick action all together
http://jsfiddle.net/gtU56/7/
$(".text").click(function()
{
$(".text").toggle();
});

toggleText = function () {
$('.text').toggle();
}
check here http://jsfiddle.net/gtU56/3/

It's because of how you're loading the function. Switch it from onLoad to no wrap (head) and it works fine.
jsFiddle example
Using jsFiddle's onLoad wraps your function in a window.onload call like this:
<script type="text/javascript">
//<![CDATA[
$(window).load(function(){
function toggleText() {
$('.text').toggle();
}
});//]]>
</script>
While no wrap (head) just adds it normally like this:
<script type="text/javascript">
//<![CDATA[
function toggleText() {
$('.text').toggle();
}
//]]>
</script>

since you are already claiming having jquery, you need not use inline javascript. try this
var elems = $('.text');
elems.click(function(){
elems.toggle();
});
fiddle : http://jsfiddle.net/gtU56/5/

$('.text').click(function() {
$('.text').toggle('slow', function() {
// do your animation..
});
});
​
Js Fiddle

This is the solution - http://jsfiddle.net/gtU56/6/
You need to first make sure that the function is registered after page load. Then, bind a click event to the div.
Hope this helps!

First you should organize you jQuery code like this:
$.(document).ready(function() {
// enter jQuery code here
});
Otherwise you're accessing a not completly loaded html document.
Also, you don't need the event-listener if you are using jQuery.
This should work for you:
$.(document).ready(function() {
$('.text').click(function() {
$(this).toggle();
});
});

Is very easy. You can use ID or CLASS.
onclick="$('NAME ID or CLASS').toggle(ANIMATION or DURATION);"
<div>
<div class="text" onclick="$('.text2').toggle(400);">Show More</div>
<div class="text2" style="display:none">Show Less</div>
</div>