I want to include this kind of code to a second place.
<div id="social-links">
<!-- Facebook -->
<a href="https://www.facebook.com/name" target="_blank">
<i class="fa fa-facebook-square fa-lg"></i>
Facebook
</a>
<!-- Google+ -->
<a href="https://plus.google.com/+name" target="_blank">
<i class="fa fa-google-plus fa-lg"></i>
Google+
</a>
</div>
Because of the available width I want to replace the with <br/>.
This is my current code but it doesn't work:
$( " " ).replaceWith( "<br/>" );
JSFiddle
here you go:
$('#social-links').html($('#social-links').html().replace(/ /g,"<br/>"));
UPDATE:
Now that I think about it again after 3 years, I'd do it this way:
const $socialLinks = $('#social-links');
$socialLinks.html($socialLinks.html().split(' ').join('<br/>'));
It has much better performance than the previous code.
If you like plain JS:
var socialLink = document.getElementbyId("social-links");
socialLink.innerHTML = socialLink.innerHTML.replace(/ /g,"<br/>");
You can use:
$('#social-links').html($('#social-links').html().replace(/ /g, '<br/>'))
Ah man, late to the party!
Fixed here in a slightly longer version: http: //jsfiddle.net/kitsonbroadhurst/jyrv8e3j/2/
This question has been asked before by the way: Is it possible to remove ' ' using JQuery..?
Try a thorough search before asking next time
Related
i´ve got the following code in my website:
<a class="jr-btn jr-btn-success " data-action="sendStep"> Senden </a>
I want to do the data-action called by a javascript-function. Is it possible?
Yes it is possible, and you would use the .getAttribute('data-action') to get the value
console.log(document.getElementsByClassName("jr-btn-success")[0].getAttribute('data-action'))
<a class="jr-btn jr-btn-success " data-action="sendStep"> Senden </a>
I want to allow the user to change the 'theme' of the website when he clicks on theme 1 it loads a different CSS file then when the user clicks on theme 2. How is this possible?
This is what I have tierd to do with so far.
<script type="text/javascript">
window.onload = function() {
var fontButton = document.getElementById('changeFont');
fontButton.addEventListener('click', function(){
document.write('<link rel="stylesheet" type="text/css" href="/France2014/css/test.css">');
});
}
</script>
This loads the file when I click on the button, but it removes everything else inside the website and just leaves the HTML tag and CSS file, I know this because I launch the development tool inside of Google chrome.
What can I do? Is there a better way to implement this feature?I am open to suggestions.
Changing a theme is usually done by loading in another class with JQuery.
For example:
HTML:
<body id='skin' class="skin-blue">
JQuery:
$('#skin').addClass('skin-red').removeClass('skin-blue');
To change a font-size easily, consider something like this for example:
var size = 20;
function setFontSize(s) {
size = s;
$('#sidebar-menu').css('font-size', '' + size + 'px');
$('#content').css('font-size', '' + size + 'px');
}
function increaseFontSize() {
setFontSize(size + 5);
}
function decreaseFontSize() {
if(size > 5)
setFontSize(size - 5);
}
$('#inc').click(increaseFontSize);
$('#dec').click(decreaseFontSize);
setFontSize(size);
and for example a + and - button
<li class="dropdown tasks-menu">
<li>
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-fw fa-plus" id="inc"></i>
</a>
</li>
</li>
<li class="dropdown tasks-menu">
<li>
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-fw fa-minus" id="dec"></i>
</a>
</li>
</li>
i suggest you to add id or class onclick to <body> tag, You will have two sets of styles:
.menu{
color:black}
and after click you will add <body id="greenTheme">
#greenTheme .menu{
color:green}
i think you should have to change just the href value of stylesheet on every button click .Doing that ,will load the new CSS file without affecting the DOM elements . Hope I am clear to you .
Thanks !!
I would try the following link as a quick working example...
enter link description here
You can see it in action here...
enter link description here
Even though your attempted solution is pure JavaScript and you might not actually need it I feel the need to mention jQuery.
It should help you write less code that should be cross browser friendly too, it actually makes writing JavaScript less painful
You can put a div before the link tag and use getElementById.innerHTML and change the contents to your desired css
I have created a simple toggle show and hide.
I have a problem though when duplicating the classes.
My toggle works but when I duplicate the containers and press the trigger it shows all containers not just the one.
I have tried to adjust my code using the (this).find function but its not working. can someone show me where i am going wrong?
<!--SHARE-->
<i class="fa fa-share"></i>Share
<div class="show-share-box">
<div class="share-this-wrap">
<a href="#" data-toggle="tooltip" class="share-popup share-btn" title="Share on Facebook">
<i class="fa fa-facebook"></i>
<div class="meta-share-wrap">
<span class="shot-social-count">4</span>
</div>
</a>
<a href="#" data-toggle="tooltip" class="share-popup share-btn" title="Share on Twitter">
<i class="fa fa-twitter"></i>
<div class="meta-share-wrap">
<span class="shot-social-count">6</span>
</div>
</a>
</div>
</div><!--end share box-->
My code that works.
$(".share-trigger").click(function(e){
e.preventDefault();
$(".show-share-box").slideToggle('slow');
})
My code that is not working - here i have tried to add the (this function)
$(".share-trigger").click(function(e){
e.preventDefault();
$(this).find('.show-share-box').slideToggle('slow');
})
Thanks a bunch!!
Next will select all .show-share-box so using the first in the next set should do the trick.
$(".share-trigger").click(function(e){
e.preventDefault();
//$(".show-share-box").slideToggle('slow');
$(this).next(".show-share-box").first().slideToggle('slow');
})
the problem is you are selecting <a> element as $(this) and finding inside ('.show-share-box') which is sitting outside your <a>
you can use .next() or directly use class to toggle
Jsfiddle: http://jsfiddle.net/FtgN4/2/
$(".share-trigger").click(function (e) {
e.preventDefault();
$('.show-share-box').slideToggle("slow", function () {
// animation complete
});
})
Should be:
$(this).next('.show-share-box').slideToggle('slow');
$(this).find('.show-share-box').slideToggle('slow');
$(this) --> refers to the current element which is .share-trigger in your case
$(this).find('.show-share-box') means find the .show-share-box inside .share-trigger
your code not working as there is no element .show-share-box inside .share-trigger
Updated after OP updated question.
.next()
$(this).next('.show-share-box').slideToggle('slow');
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");
});
I just want to clone the link provided (i.e. href="xxx", not all the junk in between) and put that link on another link elsewhere on the page.
This is the link I want to clone:
<a href="/ReviewNew.asp?ProductCode=TRU%2DGDM49">
<span class="PageText_L479n"> |
<span id="write">Write a review</span>
</span>
</a>
This is where I want to clone the link to (on id sendreviewlink):
<li id="sendreview">
<a id="sendreviewlink" href=""><em>Write a Quick Review</em>
<span class="hwText">Earn $2 For Every Approved Review</span>
</a>
</li>
This is my JavaScript code which I have tried so far:
$('#write').closest('a').clone().wrap('#sendreviewlink');
$('#write').closest('a').clone().appendTo('#sendreviewlink');
$('#write').closest('a').clone().ReplaceAll('#sendreviewlink');
you can just set the href like this
$('#sendreviewlink').attr('href',$('#write').closest('a').attr('href'));
Here you go!
http://jsfiddle.net/bsXTM/
Not very polished tho, but ill leave that up to you.