Please login or register.

Login with username, password and session length
Advanced search  
Pages: 1 [2] 3

Author Topic: JS a href="#" - hum hum  (Read 4170 times)

Sven

  • ULTIMATE member
  • ******
  • Karma: 88
  • Posts: 2029
  • Chasing MY bugs!
    • hiseo.fr - rédacteur Web
Re: JS a href="#" - hum hum
« Reply #15 on: March 21, 2011, 11:17:45 AM »

Should work as well online but, for me, no way.  :-[

nukpana

  • Hero Member
  • *****
  • Karma: 71
  • Posts: 663
Re: JS a href="#" - hum hum
« Reply #16 on: March 21, 2011, 03:03:25 PM »

This works for me... on localhost:

Please note my href's
Code: [Select]
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
</head>
<body>
<a href="javascript:void(0);" id="example-show" class="showLink">See more.</a>
<div id="example" class="more">
<p>Congratulations! You've just disvovered the hidden Div.<br />
Clicking the link below will hide the Div again.</p>
<p><a href="javascript:void(0);" id="example-hide" class="hideLink">Hide this content.</a></p>
<!-- EQ added ending div -->
</div>
</body>

<script type="text/javascript">
(function() {
$('#example').hide();
$('.showLink').click(function() {
$('#example').toggle();
});
$('.hideLink').click(function() {
$('#example').hide();
});
return false;
})();
</script>
</html>
Logged

Fred K

  • Still trying to learn stuff
  • ULTIMATE member
  • ******
  • Karma: 130
  • Posts: 2728
    • Personal
Re: JS a href="#" - hum hum
« Reply #17 on: March 21, 2011, 03:34:35 PM »

... My solution was to remove the #-sign from the href tag (leaving it empty) like so - <a href="" ...

With that approach you don't need the href at all. Put an id there instead as target for scripting and styling (or see Nuk's example - void() or void(0) usually does the trick.) E.g:

Code: [Select]
<a id="example" title="Toggle this here thang"></a>
« Last Edit: March 21, 2011, 03:36:30 PM by Fred K (agentsmith) »
Logged

Sven

  • ULTIMATE member
  • ******
  • Karma: 88
  • Posts: 2029
  • Chasing MY bugs!
    • hiseo.fr - rédacteur Web
Re: JS a href="#" - hum hum
« Reply #18 on: March 21, 2011, 03:41:41 PM »

Yeap!
Fred is right. That was it.
Jason’s solution works too locally.

You won a karma Jason! (well you deserve much more, but I just can offer 1 K per hour).
But if you want another well, just follow me..

Keyrocks

  • Doug
  • ULTIMATE member
  • ******
  • Karma: 449
  • Posts: 6019
  • Semantically Challenged
    • snews.ca
Re: JS a href="#" - hum hum
« Reply #19 on: March 21, 2011, 04:55:02 PM »

... My solution was to remove the #-sign from the href tag (leaving it empty) like so - <a href="" ...

With that approach you don't need the href at all. Put an id there instead as target for scripting and styling (or see Nuk's example - void() or void(0) usually does the trick.) E.g:

Code: [Select]
<a id="example" title="Toggle this here thang"></a>

Yeppp.... that's been working for me too.
Logged
Do it now... later may not come.
-------------------------------------------------------------------------------------------------
sNews 1.6 MESU | sNews 1.6 MEMU

nukpana

  • Hero Member
  • *****
  • Karma: 71
  • Posts: 663
Re: JS a href="#" - hum hum
« Reply #20 on: March 21, 2011, 10:27:34 PM »

@Sven, thanks for the karma.

I would potentially do it this instead - With JS turned off, I still get to the content.
Code: [Select]
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
</head>
<body>
<div id="addtlContent">
<p id="innerAddtlContent">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>
</body>
<script type="text/javascript">
(function() {
$('#innerAddtlContent').before('<p><a href="javascript:void(0);" class="showLink">See more.</a></p>');
$('<p><a href="javascript:void(0);" class="hideLink">Hide this content.</a></p>').appendTo('#innerAddtlContent');
$('#innerAddtlContent').hide();
$('.showLink').click(function() {
$('#innerAddtlContent').toggle();
});
$('.hideLink').click(function() {
$('#innerAddtlContent').hide();
});
return false;
})();
</script>
</html>

-- Note, I could just add a preventDefault here... to prevent the href="#" or href="" or whatever...

@Sven, Doug - why not just use the P tag?
« Last Edit: March 22, 2011, 02:32:41 PM by nukpana »
Logged

Sven

  • ULTIMATE member
  • ******
  • Karma: 88
  • Posts: 2029
  • Chasing MY bugs!
    • hiseo.fr - rédacteur Web
Re: JS a href="#" - hum hum
« Reply #21 on: March 22, 2011, 08:26:37 AM »

Hi Dudes,
for some reason  ??? Jason’s 1st piece of code is working well with a DIV inside an article,
but with these HTML5 tags it doesn’t work:
Code: [Select]
<script>
function showHide(shID) {
   if (document.getElementById(shID)) {
   if (document.getElementById(shID)) {
      if (document.getElementById(shID+"-show").style.display != "none") {
         document.getElementById(shID+"-show").style.display = "none";
         document.getElementById(shID).style.display = "block";
      }
      else {
         document.getElementById(shID+"-show").style.display = "inline";
         document.getElementById(shID).style.display = "none";
      }
   }
}}
</script>
<h1><a href="javascript:void(0);" id="toggle-show" class="showLink" onclick="showHide(" toggle="" );return="" false;="">Résumé</a></h1>
<details id="toggle">
<summary>Elit a ac nisi rhoncus rhoncus integer aliquet, natoque velit! Rhoncus, nec mattis sit pulvinar adipiscing nec eu urna augue tincidunt integer tincidunt et aliquet sit mid lundium! Cras. Ut, elementum, nisi?</summary>
<a href="javascript:void(0);" id="toggle-hide" class="hideLink" onclick="showHide(" toggle="" );return="" false;="">Hide this content.</a>
</details>
Am I nuts?  ???

nukpana

  • Hero Member
  • *****
  • Karma: 71
  • Posts: 663
Re: JS a href="#" - hum hum
« Reply #22 on: March 22, 2011, 11:56:02 AM »

What is this??
Code: [Select]
onclick="showHide(" toggle="" );return="" false;=""
And:
Code: [Select]
<script>
function showHide(shID) {
   if (document.getElementById(shID)) {
   if (document.getElementById(shID)) {

Isnt firebug showing an error for you?
« Last Edit: March 22, 2011, 12:04:29 PM by nukpana »
Logged

Sven

  • ULTIMATE member
  • ******
  • Karma: 88
  • Posts: 2029
  • Chasing MY bugs!
    • hiseo.fr - rédacteur Web
Re: JS a href="#" - hum hum
« Reply #23 on: March 22, 2011, 12:20:41 PM »

Sorry Jason...
I didn’t notice I pasted twice the 1st line. :-[

The other part "onclick" came from my original script.

And, I wasn’ really awake this morning so I didn’t notice your alternative.
Gonna try it this afternoon.

[EDIT]
Is JQuery needed?
I can’t make it working.
« Last Edit: March 22, 2011, 12:38:59 PM by Sven »
Logged

Fred K

  • Still trying to learn stuff
  • ULTIMATE member
  • ******
  • Karma: 130
  • Posts: 2728
    • Personal
Re: JS a href="#" - hum hum
« Reply #24 on: March 22, 2011, 12:30:17 PM »

Not sure about "nuts" :D but, as Jase points out there seems to be some irregularities in your code...

fwiw, here's the jQuery toggle function I've used for a long time, which works on just about any element (including HTML5 thingies), just as a comparison. I haven't tested Jason's but it seems to me it should work just fine on any element as well.

Code: [Select]
$(document).ready(function() {
$('summary.asum').show();
$('a#hide_asum').click(function() {
    $('summary.asum').slideToggle(200);
    $(this).text($(this).text() == 'Show Summary' ? 'Hide Summary' : 'Show Summary');
    return false;
    });
});

Usage for this in articles is

Code: [Select]
<details>
<a id="hide_asum" title="Toggle summary">Hide summary<!-- This text is replaced depending on state by script --></a>
<summary class="asum">Summary text etc</summary>
</details>

Note, if used both in shortened view and full view, then the <a> element should be a class instead. I only use it in full view to avoid toggle confusions/collisions.
Logged

nukpana

  • Hero Member
  • *****
  • Karma: 71
  • Posts: 663
Re: JS a href="#" - hum hum
« Reply #25 on: March 22, 2011, 01:04:30 PM »

My alternative does require Jquery... but this doesn't:

Code: [Select]
<!doctype>
<html>
<head>
<script>
// Source: Sitepoint book "Simply Javascript"
// Modified for use with the document object
document.getElementByClass = function(theClass) {
var elementArray = [];
if (typeof document.all !== "undefined") {
  elementArray = document.all;
} else {
  elementArray = document.getElementsByTagName("*");
}
var matchedArray = [];
var pattern = new RegExp("(^| )" + theClass + "( |$)");
for (var i = 0; i < elementArray.length; i++) {
  if (pattern.test(elementArray[i].className)) {
  matchedArray[matchedArray.length] = elementArray[i];
}
  }
  return matchedArray;
};

// Source: http://simonwillison.net/2004/May/26/addLoadEvent/
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload !== 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
};
}
}
</script>
</head>
<body>
<h1 id="ResumeToggleLink" class="toggleLink toggle">Résumé</h1>
<details id="ResumeDiv">
<summary>Elit a ac nisi rhoncus rhoncus integer aliquet, natoque velit! Rhoncus, nec mattis sit pulvinar adipiscing nec eu urna augue tincidunt integer tincidunt et aliquet sit mid lundium! Cras. Ut, elementum, nisi?</summary>
</details>
</body>
<script>
// Toggle Functions
// Source modified from http://bonrouge.com/~togglit
function toggleNext(elm) {
var next = elm.nextSibling;
while ( next.nodeType != 1 ) {
next = next.nextSibling;
}
next.style.display = (
(next.style.display=="none")
? "block"
: "none"
);
}

function toggleEl(elm) {
elm.onclick = function() {
toggleNext(this);
}
toggleNext(elm);
}

function toggleIt() {
if ( document.getElementByClass("toggle") ) {
var toggle = document.getElementByClass("toggle"),
i = 0;

for (i; i < toggle.length; i++) {
toggleEl( toggle[i] );
}
}
}
addLoadEvent(toggleIt());

// Sven Resume Code
(function() {

// Set the H1 styles as a link
if( document.getElementById('ResumeToggleLink') ) {
var ResumeToggleLink = document.getElementById('ResumeToggleLink');
ResumeToggleLink.style.color = "blue";
ResumeToggleLink.style.textDecoration = "underline";
ResumeToggleLink.style.cursor = "pointer";
}

// Hide the Resume div
if( document.getElementById('ResumeDiv') ) {
var ResumeDiv = document.getElementById('ResumeDiv');
ResumeDiv.innerHTML = ResumeDiv.innerHTML + '<p><a href="javascript:void(0);" id="HideResumeDiv" class="toggleLink">Hide this content.</a></p>';
ResumeDiv.style.display = "none";
}


if( document.getElementById('HideResumeDiv') ) {
var HideResumeDiv = document.getElementById('HideResumeDiv');
HideResumeDiv.onclick = function() {
if( document.getElementById('ResumeDiv') ) {
var ResumeDiv = document.getElementById('ResumeDiv');
ResumeDiv.style.display = "none";
}
};
}
}());

</script>
</html>
« Last Edit: March 22, 2011, 03:06:56 PM by nukpana »
Logged

Sven

  • ULTIMATE member
  • ******
  • Karma: 88
  • Posts: 2029
  • Chasing MY bugs!
    • hiseo.fr - rédacteur Web
Re: JS a href="#" - hum hum
« Reply #26 on: March 22, 2011, 01:05:44 PM »

Hi Fred.
That’s allmost the script I use for my other blog which is using JQuery.
But there I don’t use any framework.
I found a dirty way in december to make it (a simple "Toggle" script) but not very convenient with the expected behaviour in HTML5.

Rui Mendes

  • Development,Testing, Support
  • Hero Member
  • *****
  • Karma: 195
  • Posts: 1009
  • sNews1.7
    • Comunidade Portuguesa
Re: JS a href="#" - hum hum
« Reply #27 on: March 22, 2011, 01:13:31 PM »

Code: [Select]
<a href="#" id="example-show" class="showLink" onclick="showHide('example');return false;">See more.</a>
<div id="example" class="more">
<p>Congratulations! You've just disvovered the hidden Div.<br />
Clicking the link below will hide the Div again.</p>
<p><a href="#" id="example-hide" class="hideLink" onclick="showHide('example');return false;">Hide this content.</a></p>
Hello Phillippe, my late response.
I belive missing something \
Quote
<a href="#" id="example-show" class="showLink" onclick="showHide(\'example\');return false;">See more.</a>
<div id="example" class="more">
<p>Congratulations! You've just disvovered the hidden Div.<br />
Clicking the link below will hide the Div again.</p>
<p><a href="#" id="example-hide" class="hideLink" onclick="showHide('example');return false;">Hide this content.</a></p>
Give me some feedback if works.
Logged
Need a Job on Europe. Linkdin - Facebook / Group

nukpana

  • Hero Member
  • *****
  • Karma: 71
  • Posts: 663
Re: JS a href="#" - hum hum
« Reply #28 on: March 22, 2011, 01:16:57 PM »

Not sure about "nuts" :D but, as Jase points out there seems to be some irregularities in your code...

fwiw, here's the jQuery toggle function I've used for a long time, which works on just about any element (including HTML5 thingies), just as a comparison. I haven't tested Jason's but it seems to me it should work just fine on any element as well.

Code: [Select]
$(document).ready(function() {
$('summary.asum').show();
$('a#hide_asum').click(function() {
    $('summary.asum').slideToggle(200);
    $(this).text($(this).text() == 'Show Summary' ? 'Hide Summary' : 'Show Summary');
    return false;
    });
});

Usage for this in articles is

Code: [Select]
<details>
<a id="hide_asum" title="Toggle summary">Hide summary<!-- This text is replaced depending on state by script --></a>
<summary class="asum">Summary text etc</summary>
</details>

Note, if used both in shortened view and full view, then the <a> element should be a class instead. I only use it in full view to avoid toggle confusions/collisions.

$('summary.asum').show(); - I assume you mean hide - then this means if JS is off, I never get to see the content at all. (Re: Mobile Users:  Hard for some of us former Blackberry users & I would assume Android prepaid users as well) Actually, why would you show, already shown content.. unless you mean to hide it (goes back to my striked out comment)

I still wouldn't have added the A tag in the document, unless it was injected in by JS/Jquery as shown in my alternative or sans the A tag altogether as in this alternative.  Build the content first, then build the behavior around it.
« Last Edit: March 22, 2011, 02:39:54 PM by nukpana »
Logged

Fred K

  • Still trying to learn stuff
  • ULTIMATE member
  • ******
  • Karma: 130
  • Posts: 2728
    • Personal
Re: JS a href="#" - hum hum
« Reply #29 on: March 22, 2011, 03:24:16 PM »

$('summary.asum').show(); - I assume you mean hide - then this means if JS is off, I never get to see the content at all. (Re: Mobile Users:  Hard for some of us former Blackberry users & I would assume Android prepaid users as well) Actually, why would you show, already shown content.. unless you mean to hide it (goes back to my striked out comment)

I still wouldn't have added the A tag in the document, unless it was injected in by JS/Jquery as shown in my alternative or sans the A tag altogether as in this alternative.  Build the content first, then build the behavior around it.

$('summary.asum').show means that content is visible initially, for precisely the reasons you mention (and others) ;) and viewers are given the option to hide it. But the script works both ways - e.g to initially hide the content, change $('summary.asum').show to $('summary.asum').hide plus a few other obvious changes ($('a#show_asum').click(function() for example, plus the changeable text.

Yes, the cleaner way is to not use an (extra) anchor element for the toggle. In my case however, the text is changeable depending on shown/hidden - plus normally I use an image for the toggle instead of text, so there's that as well. Perhaps it's better to inject the <a> element through the script, but I'm clinging to the 80-20 illusion here... Plus the script is kept simple which is good for me...

Anyway, it was more to show that the type of element – HTML5 or no – isn't dependent on the toggle success,  obviously since all scripts displayed here target id or class to do its thing.

Content first, behaviour after - no argument there. That doesn't mean that the behavour must be the same for all users though.
« Last Edit: March 22, 2011, 03:35:22 PM by Fred K (agentsmith) »
Logged
Pages: 1 [2] 3