All the h1 tags in my webpage contain a custom tool-tip and an anchor(which are added with jquery). The html looks like this:
<h1 id="heading1">
<span>
Intro
<div class="tooltip">
<i class="icon-decline">X</i>
<div class="tooltip-arrow"></div>
<div class="tooltip-inner">
<input type="text" readonly="readonly" value="http://someurl/somemore/#heading1">
</div>
</div>
<a href="http://someurl/somemore/#heading1" class="anchor"><i class="icon-chain-link">#</i>
</a>
</span>
</h1>
For smaller devices after hiding the tool-tip and the anchor I want convert the string within the h1 to an anchor link with the native link of the heading. I want something like this:
<h1 id="heading1">
<span>
Intro
<div class="tooltip">
<i class="icon-decline">X</i>
<div class="tooltip-arrow"></div>
<div class="tooltip-inner">
<input type="text" readonly="readonly" value="http://someurl/somemore/#heading1">
</div>
</div>
<a href="http://someurl/somemore/#heading1" class="anchor"><i class="icon-chain-link">#</i>
</a>
</span>
</h1>
Unfortunately until now I haven't found a way to target solely the text string and the jquery wrapInner() method, that I'm using, wraps all the the elements inside the h1. This is my code until now:
//the function to hide the tooltip, the anchor and convert the h1 to link
function makeResponsive(){
if ($(window).width() < 780) {
$('h1').wrapInner('');
$('div.tooltip').css('display', 'none');
$('a.anchor').hide();
} else {
$('a.anchor').show();
}
}
//run on document load and on window resize
$(document).ready(function () {
//on load
makeResponsive();
//on resize
$(window).resize(function(){
makeResponsive();
});
});
Here is a working example with an additional h2 tag. First problem: I can't set the id from the h tag as location.hash Second problem: Want to convert only the text string of the h tag to a link
If a tag contains an id attribute, you don't need an anchor for it.
If this page http://www.example.com/page1.html contains a tag like <section id="general_information">, all you need to link directly to that section is a link like ...
Following the example are you forgetting this part:
$('a.anchor').click(function(event) {
event.stopPropagation();
var thistool = $(this).parent().find('div.tooltip');
$('div.tooltip').not(thistool).hide();
thistool.toggle();
thistool.find('input').select();
});
$('.icon-decline').on('click', function() {
$(this).parent().hide();
});
$('div.tooltip').on('click', function(event) {
event.stopPropagation();
});
$(document).on('click', function() {
$('div.tooltip').hide();
});
Demo: https://jsfiddle.net/hmyf4mp7/4/
So here is my solution:
if ($(window).width() < 780) {
$('h1 > span, h2 > span, h3 > span').each(function() {
window.location.hash = this.parentElement.id;//set the local id as hash
$(this).contents().eq(0).wrap('<a class="native" href="' + window.location.hash + '"></a>');
});//get ONLY the text within the h tags and wrap it with a tags that have the local hash
In devices with width less than 780px for each span within the h tags I set the hash equal to the id of their parent. Then i get the first content of the span, which is the text and wrap it with an a that has the complete URL of the location.
In devices with width more than 780px I just find and unwrap the a tags that wrap the text.
} else {
$('a.native').contents().unwrap();
}
Here is a Demo with the complete code.
Related
Given a basic structure how can I turn a series of divs into links without turning every div into a link? Here's an example:
<div class="boxes">
<div class="box"><p>Some text with a link</p></div>
<div class="box"><p>Some text without a link</p></div>
<div class="box"><p>Some text with a link</p></div>
<div class="box"><p>Some text without a link</p></div>
</div>
And the associated jQuery I'm using to make the divs clickable:
$(document).ready(function() {
if($('.boxes p a').length){
$(".boxes .box").click(function() {
window.open($(this).find("a").attr("href"));
return false;
});
}
});
The problem I'm running into is the click function gets applied to all divs instead of only those with links.
The desired behavior is to only create a fully clickable div only when an anchor element is found.
For the purposes of this use case, the div (.box) is generated dynamically and wrapping the element in an anchor tag (<div> </div>) is not possible.
Fiddle: https://jsfiddle.net/fu8xLg0d/
Because you add event listeners on all the .boxes .box classes, which are all your divs.
Just add something like :
$(".boxes .box").has('a')...
to narrow it to those only containing an a element
JSFiddle
use .parent to solve your purpose:
$(document).ready(function() {
if($('.boxes p a').length){
$("a").parent().parent().click(function() {
window.open($(this).find("a").attr("href"));
return false;
});
}
});
But yes, it can even create a problem so i will say to give a class to your link and then call its parent... :)
Plotisateur just beat me by a minute or two! :P
if($('.boxes p a').length){
$(".boxes .box").has('a').click(function() {
window.open($(this).find("a").attr("href"));
return false;
});
Here's the code anyway: https://jsfiddle.net/fu8xLg0d/1/
You can try this.
$(document).ready(function() {
var anchorbox =$(".boxes p a");
if(anchorbox.length>0){
$(anchorbox).parent().click(function() {
window.open($(this).find("a").attr("href"));
return false;
});
}
});
div (.box) is generated dynamically.
Delegate the click event from the body to the target div and on click on the element check if it has anchor tag. For adding the pointer icon create a separate function which will add the icon to the div only if it has an anchor tag as child
$(document).ready(function() {
// separate function to add pointer only if a is present
addClassToElem();
$("body").on('click', '.box', function() {
if ($(this).find('a').length) {
window.open($(this).find("a").attr("href"));
return false;
}
})
});
function addClassToElem() {
$('.box a').each(function(a, b) {
$(this).parent().addClass('linkIcon')
})
}
.linkIcon {
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="boxes">
<div class="box">
<p>Some text with a link</p>
</div>
<div class="box">
<p>Some text without a link</p>
</div>
<div class="box">
<p>Some text with a link</p>
</div>
<div class="box">
<p>Some text without a link</p>
</div>
</div>
This little change, helps you to resolve the issue.
$(document).ready(function() {
if($('.boxes p a').length){
$(".boxes .box").click(function() {
if ($(this).children('p').children('a').length) {
window.open($(this).find("a").attr("href"));
return false;
}
});
}
});
the difference from your code is, additionally add a checking
if ($(this).children('p').children('a').length) {
window.open($(this).find("a").attr("href"));
return false;
}
I have several divs with the same class names and varying IDs. The ID is not set for the text I need to target
I need to target the Telephone Call text. If the div contains that text, how do I hide the containing div
<div id="rn_FieldDisplay_155" class="rn_FieldDisplay rn_Output">
<span class="rn_DataLabel">Telephone Call </span>
<div class="rn_DataValue">No</div>
</div>
I have tried the following to no avail
<script>
$(document).ready(function() {
$(".rn_FieldDisplay > span:contains('Telephone Call')").hide ();
});
</script>
If your code is hiding the span, but not the parent div, you can target the div to be hidden using mostly the same code you already wrote.
<script>
$(document).ready(function() {
$(".rn_FieldDisplay > span:contains('Telephone Call')").parent().hide();
});
</script>
Try selecting it's child instead of the element itself :
$(document).ready(function() {
$(".rn_FieldDisplay *:contains('Telephone Call')").hide ();
});
Try with find() function
$(document).ready(function() {
$(".rn_FieldDisplay").find(":contains('Telephone Call')").hide ();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="rn_FieldDisplay_155" class="rn_FieldDisplay rn_Output">
<span class="rn_DataLabel">Telephone Call </span>
<div class="rn_DataValue">No</div>
<p class="rn_DataLabel">Telephone Call </p>
</div>
Well you can try this:
if ($(".rn_FieldDisplay > span:contains('Telephone Call')").length > 0) {
$(".rn_FieldDisplay > span").hide();
}
Here is a little challenge: I'm trying to replace all three <img ...> tags in the code below completely by another tag named <object ...>. I Tried with jQuery .replaceWith() but didn't get it.
$( document ).ready(function() {
$("div.gallery_content > div > ul > li:firstchild > img").replaceWith( "<object>...</object>" );
});
I can't change any of the classes or add any ID or class names. And I can't change the code in any way. I can just add some Javascript / jQuery in an .js file that is already attached.
What makes things even more difficult is the fact, that I have to add the Javascript to every page on the website, but the replacement should only take place on a subpage called «spots» (e.g. .com/cms/anything/spots).
This is the code:
<div class="gallery_content">
<div id="navkeys" style="visibility: hidden;"></div>
<div>
<ul style="width: 2281px; margin-left: 0px;">
<li style="margin-left: 0px;">
<img src="XYZ" width="760" height="505" alt="XYZ" style="visibility: visible;">
<div class="gallery_details">
Some Text
</div>
</li>
<li>
<img src="XYZ" width="760" height="505" alt="XYZ" style="visibility: visible;">
<div class="gallery_details">
Some Text
</div>
</li>
<li>
<img src="XYZ" width="760" height="505" alt="XYZ" style="visibility: visible;">
<div class="gallery_details">
Some Text
</div>
</li>
</ul>
</div>
</div>
Has anyone got a clue?
Once a dom element is created, the tag is immutable.
You would have to remove the image element and replace it with an object. So you would need to get all of the information you need and then add an object element.
So you could do something like this:
$("div.gallery_content > div > ul > li:firstchild > img").each(function() {
var src = $(this).attr('src');
var width = $(this).attr('width');
.
.
.
etc...
$(this).remove();
$('<object>...</object>').prependTo('li') //or whatever your selector is to prepend.
});
The other users have given the code for the replacement, but forgot to explain how the code must act to execute only in the target page
var targetPath = "com/cms/anything/spots";
$(window).load(function(){
currentPath = window.location.pathname;
//Checks if the current page coincides with the target page
if(currentPath.indexOf(targetPath)+targetPath.length === currentPath.length){
functionThatReplaces();
}
});
With this, the script will check if the page is the correct before executing the code.
You can create a new object element, with all the attributes of the old one and then replace the img tag.
JSFiddle: http://jsfiddle.net/TrueBlueAussie/z9u5dxgu/2/
$(document).ready(function () {
$("div.gallery_content > div > ul > li > img").each(function () {
// create a new object
var $object = $('<object>');
$object.html($(this).html());
// copy all the attributes
var attributes = $(this).prop("attributes");
// loop through attributes and apply them to object
$.each(attributes, function () {
$object.attr(this.name, this.value);
});
$(this).replaceWith($object);
});
});
If it were not an img you would also copy the innerHTML using .html().
The end result of the JSFiddle looks like:
<li style="margin-left: 0px;">
<object src="XYZ" width="760" height="505" alt="XYZ" style="visibility: visible;"></object>
<div class="gallery_details">Some Text</div>
</li>
The other minor detail you mentioned was matching a specific page only (difficult to test in a JSFiddle):
$(document).ready(function () {
if (window.location.href.indexOf("/cms/anything/spots") > 0){
$("div.gallery_content > div > ul > li > img").each(function () {
// create a new object
var $object = $('<object>');
$object.html($(this).html());
// copy all the attributes
var attributes = $(this).prop("attributes");
// loop through attributes and apply them to object
$.each(attributes, function () {
$object.attr(this.name, this.value);
});
$(this).replaceWith($object);
});
}
});
How can i split some text in div using html comment.
Lats say i haw:
<div id="id1">Some first text <!--more--> here.</div>
<a id=id1>Show/Hide</a>
<div id="id2">Some second text is <!--more--> right here.</div>
<a id=id1>Show/Hide</a>
I wont a jquery or javascript to show or hide text after<!--more-->.
Thanks
You can try something like this:
Given markup:
<div id="id1">Some first text <!--more--> here.</div>
<a>Hide</a>
<div id="id2">Some second text is <!--more--> right here.</div>
<a>Hide</a>
Add the following javascript:
//1. On page load, wrap text to be hidden in <span>
$(function() {
$("div").each(function() {
var html = $(this).html();
$(this).html(html.replace('<!--more-->', '<span class="hiddenText">', html) + '</span>');
});
// 2. Toggle visibility of span tags when clicking link
$('a').click(function() {
if ($(this).html() == 'Hide') {
$(this).prev('div').children('.hiddenText').hide();
$(this).html('Show');
} else {
$(this).prev('div').children('.hiddenText').show();
$(this).html('Hide');
}
});
});
Check my jsFiddle for a working example.
UPDATE: Updated solution to not rely on separate CSS class to hide/show text.
I am new to JavaScript and actually quite desperate by now
I have an HTML file that:
gets data from an XML file and displays them in various divs (e.g. )
these divs are hidden (by default) by a class name (class='box')
when a link is clicked, I pass the 'href' to the function showContent, remove the #, and then look for an element with that ID in the document.
then I add a new class name ('show') - so that this element shows up!
If you run the code you will see that every time you click on a link a new div is displayed...
So current problems:
replace already shown divs with the new clicked ID so that only one div shows up every time.
How can I avoid inserting the onClick event in every single tag - and make this more automated?
My code is as follows:
function showContent(obj)
{
var linkTo = obj.getAttribute("href");
var newlinkTo=linkTo.replace('#','');
//alert (newlinkTo);
document.getElementById(newlinkTo).innerHTML=" This is where the xml variable content should go";
document.getElementById(newlinkTo).className += " Show";
return true;
}
<a href="#b0" onClick="return showContent(this);">
<div id="text_content"> link2 </div>
</a>
<a href="#b1" onClick="return showContent(this);">
<div id="text_content"> link 1 </div>
</a>
<div class='box' id='b0'> abstract content </div>
<div class='box' id='b1'> introduction content </div>
I'm not usually into using jQuery everywhere, but with it you could just do:
<a class='showContent' data='b0'/>
Your js:
var selected;
$('a.showContent').on('click',function(e){
var toShow = $(this).attr('data');
if(selected!==undefined) selected.removeClass('Show');
selected = $(div+'#'+toShow);
selected.addClass('Show');
});
Not sure if this is what you want, but thought I'd suggest it.
This sort of thing is not hard to do without jQuery.
I would recommend using a hash-bang (#!) for Javascript activated links to keep it separate from other possible links with hashes. (script is at the bottom)
<div id="nav-links">
<a href="#!b0">
<div id="text_content"> link2 </div>
</a>
<a href="#!b1">
<div id="text_content"> link 1 </div>
</a>
</div>
<div class='box' id='b0'> abstract content </div>
<div class='box' id='b1'> introduction content </div>
<script type="text/javascript">
var links = document.getElementById('nav-links').getElementsByTagName('a');
for(var i = 0, link; link = links[i]; i++) {
link.onclick = showContent;
// Hide content divs by default
getContentDiv(link).style.display = 'none';
}
// Show the first content div
if(links.length > 0) showContent.apply(links[0]);
var current;
function showContent() {
// hide old content
if(current) current.style.display = 'none';
current = getContentDiv(this);
if(!current) return true;
//current.innerHTML = "This is where the xml variable content should go";
current.style.display = 'block';
return true;
}
function getContentDiv(link) {
var linkTo = link.getAttribute('href');
// Make sure the link is meant to go to a div
if(linkTo.substring(0, 2) != '#!') return;
linkTo = linkTo.substring(2);
return document.getElementById(linkTo);
}
</script>
There is a WAY cleaner way to do this:
This is just my quick example, it can get EVEN cleaner than this, but this works for your case:
HTML:
link b0
link b1
<div class='box' id='b0'> abstract content </div>
<div class='box' id='b1'> introduction content </div>
CSS:
#b0 { display: none; }
#b1 { display: none; }
a, div.text_content { display: inline; padding: 0 10px; }
JQUERY:
$('.link').click(function(){
var id = $(this).attr("rel");
$('#'+id).slideToggle('slow');
});
Each link would have to have a REL attribute that is the same as the ID of the div element that you are trying to show.
Here is a JSFiddle to this example in action:
http://jsfiddle.net/CUJSM/5/