My website is based on a platform and I can change a little bit of the layout, but certain parts render code automatically. My problem? It is in English and I need it in Spanish. I can add javascript before the body of the website but I can't change the html directly so I was thinking I could use onload to change the text. What do you guys think? I can use jQuery, too, if that helps.
I need to change this:
<div class="c_wrapper">
<h3 class="d_customize_title" align="left">
<span id="left_title">
Playera Max
</span>
<a onclick="d.showProductInfo(); return false;" href="#">
Product details
</a>
</h3>
</div>
to this:
<div class="c_wrapper">
<h3 class="d_customize_title" align="left">
<span id="left_title">
Playera Max
</span>
<a onclick="d.showProductInfo(); return false;" href="#">
Detalles del producto
</a>
</h3>
</div>
Two options:
Find the part in the theme (platform) that is rendering the code and change it from there (best option)
Use jQuery to replace the html:
$(".c_wrapper a").text("Detalles del producto");
Example:
<script type="text/javascript">
$(".c_wrapper a").text("Detalles del producto");
</script>
</body>
Working Example:
http://jsfiddle.net/vtHBV/
As others have mentioned it's a bit hacky to do this with Javascript but here's another way to do it without jQuery:
// helper to make sure we get a sibling that is an element
function getNextSibling(node){
sibling = node.nextSibling;
while (sibling.nodeType != 1){
sibling = sibling.nextSibling;
}
return sibling;
}
// set text
getNextSibling(document.getElementById('left_title')).innerHTML = 'Detalles del producto';
Demo: http://jsfiddle.net/louisbros/dkymR/
This is perfect for jQuery, if you don't have control over the content when you initially load it it may be the best option. Below is a working sample for your example:
$(function(){
$("#left_title + a").text("Detalles del producto");
});
Related
Let's start with I'm not fluent in javascript, but I know a little. I'm on a platform that is running code I can't see on the back-end. That means I can only control so much. For example, there is a tag:
{{ component.quality_switch }}
When the page loads, it swaps that with:
<div class="co-quality-switch" data-behavior="quality_switch">
<a class="co-quality-switch" href="#" data-behavior="switch-low" style="">
<i class="co-icon-video-camera"></i>
watch in high quality
</a>
</div>
My goal, is to replace the text of the "a" link from "watch in high quality" to "toggle captions". So I experimented and removed the first {{component.quality_switch}} tag and replaced it with the outer div it normally pulls, with an ID added to the div:
<div id="captiontoggle" class="co-quality-switch" data-behavior="quality_switch">
</div>
When the page loaded, it spat back the same as before, with my added id on the div. Progress!
<div id="captiontoggle" class="co-quality-switch" data-behavior="quality_switch">
<a class="co-quality-switch" href="#" data-behavior="switch-low" style="">
<i class="co-icon-video-camera"></i>
watch in high quality
</a>
</div>
So apparently there is some java on the back-end on the data-behavior="quality_switch" part that is adding all this code. The kicker is, I need all the other things that come with that data-behavior command as that is what swaps my video source to the caption version and back when clicked. So I can't remove it. So my next thought was let's just use JS to change the innerHTML of that "a" link. The innerHTML is:
<i class="co-icon-video-camera"></i>watch in low quality
So if I can just swap that to "toggle captions" I'd be all set. But how can I swap the innerHTML of the "a" link when it doesn't have an ID? I can only assign an ID to it's parent DIV (captiontoggle). I tried adding this script:
<script>
var x = document.getElementById("captiontoggle");
var y = x.getElementsByTagName("a");
y.innerHTML = "test";
</script>
... but it didn't change anything. From my experimenting it looks like maybe I can't do this 2 layers down... Like I could change the innerHTML of captiontoggle, but not it's "a" element.
I'm open to suggestions! Thanks.
You need to use parent reference to get children and change there innerHTML
<script>
var x = document.getElementById("captiontoggle");
var y = x.children[0];
y.innerHTML = "test";
</script>
Working snippet:
var x = document.getElementById("captiontoggle");
var y = x.children[0];
y.innerHTML = "test";
<div id="captiontoggle" class="co-quality-switch" data-behavior="quality_switch">
<a class="co-quality-switch" href="#" data-behavior="switch-low" style="">
<i class="co-icon-video-camera"></i> watch in high quality
</a>
</div>
I'm brand new to javascript/jquery, but have been going okay so far (though you'd hate to see my code), but I've hit a wall with trying to strip out style tags from some HTML I'm trying to clone.
The reason for cloning is that the CMS I'm forced to use (which I don't have access to code behind, only able to add code over the top) automatically builds a top nav, and I want to add a duplicate sticky nav once the user scrolls, but also add a couple of elements to the scrolled version.
The original HTML of the top nav looks a bit like like:
<nav id="mainNavigation" style="white-space: normal; display: block;">
<div class="index">
Participate
</div>
<div class="index" style="margin-right: 80px;">
News
</div>
<div class="index active" style="margin-left: 80px;">
<a class="active" href="/about/">About</a>
</div>
<div class="external">
Collection
</div>
<div class="index">
Contact
</div>
</nav>
I had mild success (other than those style tags I want to remove) with the following, even though it doesn't seem to make sense to me, as I expected some of the elements would be repeated (the whole < nav >…< /nav > tag should have been within the #mainNavigation clone, no?):
var originalNavItems = $('#mainNavigation').clone().html();
$("#site").prepend('
<div id="ScrollNavWrapper">
<div class="nav-wrapper show-on-scroll" id="mainNavWrapper">
<nav id="newScrolledNav" style="white-space: normal; display: block;">
<div class="index home">
Home
</div>
' + originalNavItems + '
<div class="newItem">
<a href="http://www.externalsite.com">
View on External Site
</a>
</div>
</nav>
</div>
</div>');
I've tried to use a few answers from related questions on here, but I keep getting incorrect results. Can you help me?
You can strip the style elements like so:
var el = $('#mainNavigation'); // or whatever
el.find('[style]').removeAttr('style');
You can use
var originalNavItems = $('#mainNavigation').clone().find("*").removeAttr("style");
Then you can use .append() to add that html elements
Fiddle
You can clone into an imaginary div and then fetch the mainNavigation also. You can also remove the style attributes along with that. Hope this works for you...
var temp = $('<div />').html($('#mainNavigation').clone());
temp.find('*').removeAttr('style');
originalNavItems = temp.html();
The nav is cloned but the html() function only returns the HTML for the contents and that's why it disappears. You can avoid some string manipulation by adding the cloned element directly before a target element.
$("#site").prepend('
<div id="ScrollNavWrapper">
<div class="nav-wrapper show-on-scroll" id="mainNavWrapper">
<nav id="newScrolledNav" style="white-space: normal; display: block;">
<div class="index home">
Home
</div>
<div class="newItem">
<a href="http://www.externalsite.com">
View on External Site
</a>
</div>
</nav>
</div>
</div>');
$('#mainNavigation').clone()
.find('[style]').removeAttr('style').end()
.insertBefore('#newScrolledNav .newItem');
In the previous case find('[style]') matches elements that have a style attribute.
I'm new to Stack Overflow (and js in general), so this might be really bad ettiquette, but I seem to have accidentally fixed it myself trying to debug my implementation of the first upvoted answer that #Anoop Joshi gave above. Please comment and let me know if it would have been better to just edit my question!
I decided to break the process down into separate steps – similar to #Kiran Reddy's response actually, but I hadn't got to trying his yet.
I tried:
var styledHTML = $('#mainNavigation').clone();
styledHTML.find("div[style]").removeAttr('style');
var originalNavItems = styledHTML.html();
$("#site").prepend('<div… etc.
with a console.log(styledHTML) etc under each line to check what I had at each stage – and it worked! (The code did, console.log didn't?)
I was just doing this to try and log the value of the variables at each stage, but whatever I did fixed it…
Now I need to figure out why I can't even make console.log(variable); work :-/
Try this code
$('#mainNavigation').children().removeAttr('style');
Hope this will help you.
I have the following JavaScript at the end of the body of my HTML:
<script>
$(document).ready(function() {
$("a").click(function(event) {
var div_to_show=event.target.id;
var real_div=div_to_show.split('-');
var display_div=real_div[0];
var elementPos=$("#"+div_to_show).offset();
var top_pos=elementPos.top-118.5;
$('#board-right div').hide();
$("#" + display_div).css('margin-top',top_pos);
$("#" + display_div).show();
});
});
</script>
And here is the HTML that it is supposed to manipulate:
<div id="board-left">
<div id="board-names">
<a id="marci-link">Marci Weisler</a><br />
<a id="nicholas-link">Nicholas Rey</a><br />
</div>
</div><!-- #board-left -->
<div id="board-right">
<div id="marci" style="display:none;">
<p>
Marci Weisler is an accomplished...
</p>
</div>
<div id="nicholas" style="display:none;">
<p>
Nicholas Rey is a French-born...
</p>
</div>
</div><!-- board-right -->
So, the code should get the div name from the clicked link, remove the "-link" portion, and then show the appropriate div. Currently nothing is happening when I click the link. As I'm writing this, I am wondering if it is a CSS issue? Any ideas?
By the way, there is a link in the document to jQuery 1.3.
if you check http://jsfiddle.net/pramodpv/YvYBD/,
you will find that the top pos is negative.. if u correct that as u require it will work
PS: try using jsfiddle while posting your questions so that people can work on your code and give faster answers... Most prb, you will find the answer yourself :D
Trying your example, I found that I had to add an href='#' attribute to the hyperlinks and then added an event.preventDefault() as the first line in your click handler.
And same as Pramod SyneITY, the top position needs to evaluate as a positive value for the text to be visible.
I'm tinkering a bit with jquery to show a hidden div when a link is clicked. This should be fairly simple, but there's a flaw to it in this case. I have the following markup:
<div class="first-row">
<div class="week">
<p>Uge 2</p>
<p>(08-01-11)</p>
</div>
<div class="destination">
<p>Les Menuires</p>
<p>(Frankrig)</p>
</div>
<div class="days">4</div>
<div class="transport">Bil</div>
<div class="lift-card">3 dage</div>
<div class="accommodation">
<p><a class="show-info" href="#">Hotel Christelles (halvpension)</a></p>
<p>4-pers. værelse m. bad/toilet</p>
</div>
<div class="order">
<p>2149,-</p>
<p class="old-price">2249,-</p>
</div>
<div class="hotel-info">
<!-- The div I want to display on click -->
</div>
</div>
When I click the "show-info" link I want the "hotel-info" div to display.
My backend devs don't want me to use ids (don't ask me why..) and the above markup is used over and over again to display data. Therefore I need to be able to access the "hotel-info" div in the "first-row" div where the link is clicked.
I've tried to do something like:
$(document).ready(function() {
$('.show-info').click(function() {
var parentElement = $(this).parent().parent();
var lastElementOfParent = parentElement.find(".show-hotel");
lastElementOfParent.show();
});
});
But without a result :-/ Is this possible at all?
Any help is greatly appreciated!
Thanks a lot in advance!
Try this:
$('.show-info').click(function() {
$(this).closest('.accommodation').siblings('.hotel-info').show();
});
Even better imo, as it would be independent from where the link is in a row, if every "row div" has the same class (I assume only the first one has class first-row), you can do:
$(this).closest('.row-class').find('.hotel-info').show();
Reference: .closest, .siblings
Explanation why your code does not work:
$(this).parent().parent();
gives you the div with class .accommodation and this one has no descendant with class .hotel-info.
It is not a good idea to use this kind of traversal for more than one level anyway. If the structure is changed a bit, your code will break. Always try to use methods that won't break on structure changes.
You're right in not using an ID element to find the DIV you want :)
Use closest and nextAll
Live demo here : http://jsfiddle.net/jomanlk/xTWzn/
$('.show-info').click(function(){
$(this).closest('.accommodation').nextAll('.hotel-info').toggle();
});
I am wanting to use jquery to do a show/hide of a DIV from a text link.
What makes it a little different from the examples I have found of this site so far is I need a generic way of doing it multiple times on 1 page and also able to use it sitewide on anypage.
It would be really nice if I can put the JS in seperate file that is included into the pages, so maybe it can be wrapped into a function?
Can someone help me here? For making it generic it could be where I assign a div that is shown/hidden with an id like id="toggle-hide-1" and just change the numbers in my page to make it a different show/hide area
I could just name the ID using a name that will make the function show/hide a div and to seperate it from other divs that show/hide on a page I could add a number to it.
below is partial code that will do a show/hide of a div on a link click but is not exactly what I need.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" >
$(function() {
$(".view-code").click(function(evt) {
$(".tool_block, .view-code").toggle();
});
});
</script>
<a href="#" class="view-code" >view code</a>
hide code <br />
<div class="tool_block" style="display:none" >
this stuff is hidden until we choose to show it!
</div>
The best approach is probably going to be something using custom attributes. If you markup your anchor with an attribute that tells the jquery which div to toggle, it will be easier to write generic code to do the work.
Something like this:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" >
$(function() {
$(".view-code").click(function(evt) {
var d = $(this).attr("toolDiv");
$(".tool_block[toolDiv=" + d + "], .view-code[toolDiv=" + d + "]").toggle();
});
});
</script>
<a href="#" class="view-code" toolDiv="1" >view code</a>
hide code <br />
<div class="tool_block" toolDiv="1" style="display:none" >
this stuff is hidden until we choose to show it!
</div>
Then give each of your anchor-div pairs a unique toolDiv value (doesn't have to be a number).
If you could wrap the whole collection in a div, it would make it pretty easy.
$(function() {
$(".view-code").click( function(e) {
$(this).siblings().andSelf().toggle();
});
});
<div>
<a href="#" class="view-code" >view code</a>
hide code <br />
<div class="tool_block" style="display:none" >
this stuff is hidden until we choose to show it!
</div>
</div>
If it doesn't handle the <br />, you could filter the siblings to only div and anchor elements.
Why not use specific classes instead? Each element you want shown/hidden can have a class called "toggler," as in:
<div class="toggler">
...
</div>
You can then toggle the visibility of ALL elements with this class at once, with:
$(".toggler").toggle();
In this scenario, it doesn't make a difference where in the document these elements reside or even what kind of elements they are.
If this functionality needs to be available globally, you can always extend jQuery itself with a custom function, as in:
$.toggleTogglers = function(toggleClass) {
$("." + toggleClass).toggle();
};
This is nice in that you have flexibility to choose a toggle custom class of your own design.