i can't find solution for this bug
i wrok on site web multi language but i can't don't know how to fix this bug
class translate{
constructor(){
document.getElementById("fr").addEventListener('click', ()=>{
this.translate("fr");
});
document.getElementById("en").addEventListener('click', ()=>{
this.translate("en");
});
this.translate(localStorage.getItem("language"));
}
translate(language){
if(language == "fr"){
document.getElementById("myAnchor").href = "http://www.cnn.com/";
}
else if (language =="en"){
document.getElementById("myAnchor").href = "http://www.google.com/";
}
localStorage.setItem("language",language);
}
}
onload = new translate();
code Html and link i need to change
<div class="contenu-space-two">
<div class="row mx-0">
<div class=" col-2">
<img src="./resources/_images/shopping-cart.png" class="logo-link" alt="">
</div>
<div class="col-lg-4 col-md-6 col-8" >
<h4 class="lang" key="boutiques">Boutiques</h4>
</div>
<div class="col-2">
<a id="myAnchor" href="#"><img src="./resources/_images/arrow-link.png" class="arrow-link" alt=""></a>
</div>
<hr class="line_link">
</div>
and this code language
<div id="langContainer">
<a class="translate" id="lang_link[en]" href="#" style="display:none"><img src="./resources/_images/flags/en.png?1595436503" title="English"></a>
<a class="translate" id="lang_link[fr]" href="#" style="display:none"><img src="./resources/_images/flags/fr.png?1595436503" title="Français"></a>
</div>
This variable has probably already been declared.
Check this js file and the others the page references.
If there are many you can try to change the name of this class.
Related
hi i am making a website for me and i wanted to use the javascript scrollIntoView(); function. the function does work in the console on my site but not in the text where i am currently working in below is the function and the corresponding code.
<script>
let aboutus = document.querySelector("#aboutus");
let contact = document.querySelector("#contact");
let gotoAboutUs = document.querySelector("#gotoAboutUs");
function navigateAboutUs(e) {
aboutus.scrollIntoView({ behavior: "smooth" });
}
gotoAboutUs.addEventListener("click", navigateSimran, false);
</script>
this is where i want to go
<div class="p-5 Simran" id="aboutus">
<div class="row flex-wrap px-5">
<div class="card-header ml-5">
<img src="images/test.jpg" alt="" style="max-height: 400px; max-width: 400px;">
</div>
<div class="card-block px-2 mx-3">
<h3 class="card-title"><strong></strong></h3>
<p class="card-text"><h5><br></h5></p>
</div>
<div class="w-100"></div>
</div>
</div>
and this is the button
<a class="nav-link navButton mavenPro" href="#" id="gotoAboutUs"><h3>Wie zijn wij</h3></a>
the button does nothing currently.
thanks for your time
Linking to ids will scroll the element into view.
Add some css:
body {
scroll-behaviour: smooth;
}
Then link the id:
Go to about us
Here's the HTML code and the Javascript.
<div class="col-md-6 col-lg-4">
<div class="work-box">
<div class="work-img" id="Starcraft">
</div>
<div class="work-content">
<div class="row">
<div class="col-sm-8">
<h2 class="w-title">Starcraft Animation</h2>
<div class="w-more">
<span class="w-ctegory">Code</span>
</div>
</div>
<div class="col-sm-4">
<div class="w-like">
<a href="img/StarcraftAnimation.png" data-
lightbox="gallery-mf"> <span class="ion-ios-plus-outline"></span></a>
<a href="img/StarcraftAnimation2.png" data-
lightbox="gallery-mf"> <span class="ion-ios-plus-outline"></span></a>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
var myIndex = 0;
function carousel() {
if(myIndex==0)
document.getElementById('Starcraft').innerHTML = ('<picture><source srcset="img/StarcraftAnimation.webp" type="image/webp" class="img-fluid"><img src="img/StarcraftAnimation.png" alt="StarcraftAnimation" class="img-fluid" ></picture>');
else
{
document.getElementById('Starcraft').innerHTML = ('<picture><source srcset="img/StarcraftAnimation2.webp" type="image/webp" class="img-fluid"><img src="img/StarcraftAnimation2.png" alt="StarcraftAnimation" class="img-fluid" ></picture>');
}
myIndex++;
if (myIndex > 1) {myIndex = 0}
setTimeout(carousel, 5000); // Change image every 5 seconds
}
carousel();
</script>
I need to serve up some webp and alternate between two images with a fallback to png. It works but I want to know if there is a better way than redoing the innerhtml and just switching the srcset instead. Don't want a flicker as well.
Try imagekit.io that can automatically serve the right image format
Disclaimer: I am the co-founder at ImageKit.io
I'm having some trouble with jQuery overwriting the elements of a particular parent class. For instance, I have two classes that have the same name but I am looking only to use the first instance for a particular purpose and then the others for something else, but the data inside keeps being overwritten by the next function I am using. I think I know why it is doing it, I'm just unsure of how to fix it so it doesn't.
Here is my jQuery code:
function buildFriendStatus() {
$.getJSON('/members/feed/get-friend-status', function(data) {
var notFirstElement = $('.w3-container.w3-card-2.w3-white.w3-round.w3-margin:not(first)')
$.each(data, function(i, item) {
var element = notFirstElement.eq(i);
element.find('h4').html(data[i].username);
element.find('p').html(data[i].status);
element.find('img').attr('src', data[i].images);
});
}).fail(function(response) {
console.log(response.fail);
});
}
function buildSelfStatus() {
$.getJSON('/members/feed/list-own-status', function(data) {
$.each(data, function(i, item) {
$('.w3-container.w3-card-2.w3-white.w3-round.w3-margin:first').find('h4').html(data[i].username);
$('.w3-container.w3-card-2.w3-white.w3-round.w3-margin:first').find('p').html(data[i].status);
$('.w3-container.w3-card-2.w3-white.w3-round.w3-margin:first').find('img').attr('src', data[i].images);
});
}).fail(function(response) {
console.log(response.fail);
});
}
setInterval(function() {
buildFriendStatus();
}, 1000);
and then the html/calling of the functions
<script type="text/javascript">
buildSelfStatus();
buildFriendStatus();
</script>
<!-- always have this first (sticky) for the user status -->
<div class="w3-container w3-card-2 w3-white w3-round w3-margin">
<h4></h4>
<p></p>
<div class="w3-row-padding" style="margin: 0 -16px;">
<div class="w3-half">
<img src="" style="width: 100%; height: 200px;" alt="<?php echo $this->identity() . "'s image"; ?>" class="w3-margin-bottom w3-round w3-border">
</div>
</div>
</div>
<div class="w3-container w3-card-2 w3-white w3-round w3-margin">
<h4></h4>
<p></p>
<div class="w3-row-padding" style="margin: 0 -16px">
<div class="w3-half">
<img src="" style="width: 100%; height: 200px;" alt="<?php echo "Image"; ?>" class="w3-margin-bottom w3-round w3-border">
</div>
</div>
<button type="button" class="w3-btn w3-theme-d1 w3-margin-bottom">
<i class="fa fa-thumbs-up"></i> Like
</button>
<button type="button" class="w3-btn w3-theme-d2 w3-margin-bottom">
<i class="fa fa-comment"></i> Comment
</button>
</div>
Here is a screenshot of the issue.
Updated screenshot (shows the first image but not the other result(s) now)
Any help would be appreciated
Thanks!
Oh, on another note, is there a way to use jQuery to put data inside the class but have the class be shown more than once without overwriting the data previously added but only have one <div> element with the class name? Sort of like the screenshot attached but just not overwriting each class the same time. Just curious as I couldn't find anything regarding this. I guess I mean build the div element and it's child elements dynamically based on the results retrieved via $.getJSON.
$(".getfirst").click(function(){
alert($(".testdiv").first().text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="testdiv">
33
</div>
<div class="testdiv">
44
</div>
<div class="testdiv">
55
</div>
<div class="testdiv">
66
</div>
<div class="getfirst" style="width:150px; height:50px; background-color:red;">
get me!!
</div>
Why dont you use .first() of jQuery?
For example lets say you have 4 divs with same class but you want to get the text of the first div element with the specific class name:
<div class="testdiv">33</div>
<div class="testdiv">44</div>
<div class="testdiv">55</div>
<div class="testdiv">66</div>
<div class="getfirst" style="width:150px; height:50px; background-color:red;">
get me!!
</div>
$(".getfirst").click(function(){
alert($(".testdiv").first().text());
});
just added another class to the first element.
I have an banner with mouse over effects here:
As you can see the mouseover effects are working perfectly however I don't know how to make a mouse out animation. Here are its current codes:
Javascript:
var gotolink = "#";
function changeimage(imageNumber, url) {
if (document.images) {
document.images.targetimage.src =
document.getElementById('hiddenImages').children[imageNumber].src;
gotolink = url;
}
}
HTML:
DIV id=base>
<DIV id=mapcontainer>
<A href="javascript:warp()">
<IMG border=0 name=targetimage src="http://www.keencloudmedia.com/skybluekangaroo/map_wm.gif">
</A>
</DIV>
<DIV id=textcontainer>
<DIV class=textboxinner1>
<A onmouseover=changeimage(2,this.href) href="index.html">8CCC REQUESTS/TALKBACK</A>
</DIV>
<DIV class=textboxinner2>
<A onmouseover=changeimage(1,this.href) href="index.html">Alice Springs 8952 7771</A>
</DIV>
<DIV class=textboxinner2>
<A onmouseover=changeimage(0,this.href) href="index.html">Tenant Creek 8952 7182</A>
</DIV>
<DIV class=textboxinner3>
<SPAN class=t3nonelink>...other contact details <A onmouseover=changeimage(2,this.href) href="index.html">here</A></SPAN>
</DIV>
</DIV>
</DIV>
<div id="hiddenImages" style="display: none">
<img src="http://www.keencloudmedia.com/skybluekangaroo/map_wm_hover.gif" name="hoverImage" />
<img src="http://www.keencloudmedia.com/skybluekangaroo/map_wm_hover2.gif" name="hoverImage2" />
<img src="http://www.keencloudmedia.com/skybluekangaroo/map_wm.gif" name="originalImage" />
</div>
Hope you could help me achieve the mouseout effect.
I recommend using either 'onmouseout="changeimage(2,this.href)"' (in the same place as the mouseover property. Or use a jQuery handler, which is more complex for your needs really.
I have a script that shows/hides used via onClick. I can get it to show/hide just fine, but I can't get it to show/'hide everything else'. So what I get is a bunch of open containers when I really want just the one.
Javascript:
<script>
function showfields(fields){
if(document.getElementById(fields).style.display=='none'){
document.getElementById(fields).style.display='block';
}
else{
document.getElementById(fields).style.display = 'none';
}
}
</script>
HTML:
<div id="hidden" class="steps" style="display: block;">
<div class="section" style="margin-right: 10px;">
<h2>Something</h2>
</div>
<button class="continue dropdown" id="showLink" onClick="showfields('hidden2');return false;" href="#">Continue</button>
</div>
<div id="hidden2" class="steps" style="display: block;">
<div class="section" style="margin-right: 10px;">
<h2>Something2</h2>
</div>
<button class="continue dropdown" id="showLink" onClick="showfields('hidden3');return false;" href="#">Continue</button>
</div>
<div id="hidden3" class="steps" style="display: block;">
<div class="section" style="margin-right: 10px;">
<h2>Something3</h2>
</div>
<button class="continue dropdown" id="showLink" onClick="showfields('hidden3');return false;" href="#">Continue</button>
</div>
<div id="hidden4" class="steps" style="display: block;">
<div class="section" style="margin-right: 10px;">
<h2>Something4</h2>
</div>
<button class="continue dropdown" id="showLink" onClick="showfields('hidden4');return false;" href="#">Continue</button>
</div>
Thanks
Since you've tagged this with jQuery I assume that is an option:
function showfields(fields){
$('.steps').hide()
$('#' + fields).show();
}
Edit:
Is this what you're trying to do: http://jsfiddle.net/Rykus0/67cjt/2/
(without jQuery)
(ps - this can be done better)
Your question is not very clear, but I'm guessing that you want the page to start with the everything but the first div hidden.
In that case, what you have is fine, just set style="display:none;" on the elements you don't want to show at first (you can also use a class).
Also, I believe you should change the onclick call on hidden3 to be showfields('hidden4') and remove the onclick event from hidden4
I agree with Porco,
Another option would be using a class as a flag, for example
function showFields(fields){
$(fields).each(function(){
if($(this).hasClass('visible'){
$(this).hide();
}
else {
$(this).show();
}
}
}
Without using jquery .This piece of javascript may help you
<script>
function showfields(fields){
for(var i=0;i<document.body.getElementsByTagName("*").length;i++)
{ if(document.body.getElementsByTagName("*")[i].id==field)
{
document.body.getElementsByTagName("*")[i].style.display='block';
}
else{
document.body.getElementsByTagName("*")[i].style.display='block';
}
}
</script>