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
Related
I am using bootstrap 4.3.1 and would like to have a clickable icon in my list of thumbnails for a text.
I have a function where I click on the thumbnails and these images are displayed in large size next to them.
Now I want to have the same thing for my text.
Here is the code:
function myFunction(imgs) {
var expandImg = document.getElementById("expandedImg");
var imgText = document.getElementById("imgtext");
expandImg.src = imgs.src;
//imgText.innerHTML = imgs.alt;
expandImg.parentElement.style.display = "block";
}
<!--START Thumbnaill Navbar-->
<div style="overflow-y: auto; height: auto; width: 170px;">
<img src="../image" alt="###" class="img-thumbnail border-0 img-thumbnail-desktop" onclick="myFunction(this);">
<!--Here the icon for text -->
</div>
<!--END Thumbnaill Navbar-->
<!--Main Content-->
<div class="container expandedImgSize d-flex justify-content-center ">
<span onclick="this.parentElement.style.display='none'"></span>
<img class="img-fluid" id="expandedImg" src="../PlaceholderImage">
</div>
Is there a elegant solution to show just the text?
I'll try my best but i will probably need help from you guys ( 〃 ω〃)
Thanks you guys in advance!
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.
I have some code that when a user clicks away from a side-bar the side-bar closes, How do I change it so when a user clicks a link the side-bar also closes and as well as from the side bar
Example - if I was to click the word Home, it would then hide the side-bar.
//hidding side header on click outside header
$body.on('mousedown touchstart click', function(e) {
if (!($(e.target).closest('.page_header_side').length) && !($sideHeader.hasClass('header_side_sticked'))) {
$sideHeader.removeClass('active-slide-side-header');
$body.removeClass('active-side-header slide-right');
$body.parent().removeClass('html-active-push-header');
var $toggler = $('.toggle_menu_side');
if (($toggler).hasClass('active')) {
$toggler.removeClass('active');
}
}
});
} //sideHeader check
<header class="page_header_side header_slide header-special header_side_right ds">
<div class="scrollbar-macosx">
<div class="side_header_inner">
<p class="text-right mb-0 close-wrapper">×</p>
<div class="widget widget_recent_posts">
<h3 class="widget-title">Home</h3>
</div>
<div class="widget widget_recent_posts">
<h3 class="widget-title">Overview</h3>
</div>
<div class="widget widget_recent_posts">
<h3 class="widget-title">About</h3>
</div>
attached is the image of the sidebar when opened
I would turn all of your close code into a function like so:
function closeMenu(){
if (!($(e.target).closest('.page_header_side').length) && !($sideHeader.hasClass('header_side_sticked'))) {
$sideHeader.removeClass('active-slide-side-header');
$body.removeClass('active-side-header slide-right');
$body.parent().removeClass('html-active-push-header');
var $toggler = $('.toggle_menu_side');
if (($toggler).hasClass('active')) {
$toggler.removeClass('active');
}
}
});
Then I would put the same handler that you have on the body on the links of the menu. Let's say your menu has an id of menu
So you would have:
$('body', '#menu a').onClick(function(){
closeMenu();
});
This will add the handler to the body as well as all a tags within the menu.
With the given code this is what I have done:
//hidding side header on click outside header
$('.scrollbar-macosx').on('click', function(e) {
//$sideHeader.removeClass('active-slide-side-header');
//$body.removeClass('active-side-header slide-right');
//$body.parent().removeClass('html-active-push-header');
//if you want to keep playing with adding and removing classes them:
//if (($toggler).hasClass('active')) {
$('#elementToHide').fadeOut();
//}
});
//sideHeader check
And them your html:
<header class="page_header_side header_slide header-special header_side_right ds">
<div class="scrollbar-macosx" id="elementToHide">
<div class="side_header_inner">
<p class="text-right mb-0 close-wrapper">×</p>
<div class="widget widget_recent_posts">
<h3 class="widget-title">Home</h3>
</div>
<div class="widget widget_recent_posts">
<h3 class="widget-title">Overview</h3>
</div>
<div class="widget widget_recent_posts">
<h3 class="widget-title">About</h3>
</div>
</div>
</div>
</header>
Here is the fiddle : fiddle
In the employee section of a Wordpress site, I'm trying to have the bio slide open in the correct position when you click on each employee photo.
It's working well when the row is full width (4 columns) and in mobile (1 column) but in the 2 column layout (480px to 882px), position().left is returning 0, so the negative margin isn't being properly applied and the bio goes offscreen.
I can't for the life of me figure out why this is... Any help is greatly appreciated!
The site in question: http://contractor-marketing.website/
The HTML (simplified):
<div class="row">
<div class="column column_1">
<!--content-->
<div class="bio-full"><!--content--></div>
</div>
<div class="column column_2">
<!--content-->
<div class="bio-full"><!--content--></div>
</div>
<div class="column column_3">
<!--content-->
<div class="bio-full"><!--content--></div>
</div>
<div class="column column_4">
<!--content-->
<div class="bio-full"><!--content--></div>
</div>
</div>
The JS:
jQuery('.column').each(function(s, el) {
jQuery(this).find('.bio-full').eq(0).css('margin-left',-(jQuery(el).position().left));
});
Check my example below. Although I took a different approach, it essentially does what you want, and it even animates the element transition.
NOTE: This animation will happen EACH time you press the animate button. You must prevent such animation from happening more than once (if that is the behavior you are looking for). Also, change the $('#animate') selector and click event to the event of your choice.
$('#animate').click(function() {
$(".bio-full").animate({
left: "+=300",
}, 1000, function() {
// Animation complete.
});
});
body{
padding:0;
margin:0;
}
.bio-full{
background-color: red;
display:hidden;
position:relative;
width:300px;
left:-300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="animate">Animate</button>
<div class="row">
<div class="column column_1">
<!--content-->
<div class="bio-full"><h1>Profile</h1></div>
</div>
<div class="column column_2">
<!--content-->
<div class="bio-full"><h1>Profile</h1></div>
</div>
<div class="column column_3">
<!--content-->
<div class="bio-full"><h1>Profile</h1></div>
</div>
<div class="column column_4">
<!--content-->
<div class="bio-full"><h1>Profile</h1></div>
</div>
</div>
I hope this helps!
Cheers!
I have been adding ticket sales to our home page but it has dramatically slowed down the site. We have about 1250 shows for this season and even though adding this to the home page sales has gone up but people are complaining about the speed.
Currently I'm using the javascript:showhide to hold the ticket purchase information in a hidden div that shows when you click buy tickets.
I would like to have it NOT run anything in the hidden div unless the buy tickets button is click. Then it would pull the ticketing information and populate the div.
We will have about 300 of the ticketing scripts on the page at one time like Show1-Oct, Show2-Oct, Show3-Oct, Show1-Nov, Show2-Nov, Show3-Nov and so on.
Any ideas or help is greatly appreciated.
<div class='topShow bg-Show-Main'>
<a href='Show1.php'><img alt='Show1' title='Show1' src='images/show/Show1.jpg'>
<p class='title'>Show1</p>
<p>Opens October 30th</p>
</a>
<div class='btnContainer2'>
<a class='btn1' style="text-align: left; width:49%; display: inline-block;" href='Show1.php'>More info</a>
<a class='btn2 red' style="text-align: right; width:50%; display: inline-block;" href="javascript:showhide('Show1-Oct')">Buy Tickets</a>
</div>
<div id="Show1-Oct" style="display:none;">
<script type="text/javascript" src="http://website.com/booking/index.php?controller=FrontEnd&action=ActionLoad&theme=10&view=list&icons=T&cid=15&locale=1"></script>
</div>
<div class='clear'></div>
</div>
<div class='topShow bg-Show-Main'>
<a href='Show2.php'><img alt='Show2' title='Show2' src='images/show/Show2.jpg'>
<p class='title'>Show2</p>
<p>Opens October 31st</p>
</a>
<div class='btnContainer2'>
<a class='btn1' style="text-align: left; width:49%; display: inline-block;" href='Show2.php'>More info</a>
<a class='btn2 red' style="text-align: right; width:50%; display: inline-block;" href="javascript:showhide('Show2-Oct')">Buy Tickets</a>
</div>
<div id="Show2-Oct" style="display:none;">
<script type="text/javascript" src="http://website.com/booking/index.php?controller=FrontEnd&action=ActionLoad&theme=10&view=list&icons=T&cid=16&locale=1"></script>
</div>
<div class='clear'></div>
</div>
Loading up a separate javascript file for each element on the page is a really bad idea.
A more sane design would be to have a single script that makes an ajax call for the necessary data for each listing when needed (when the user clicks that 'buy tickets' button) and injects it into the page. Something along these lines: (some extraneous HTML removed from your sample code, but you'll get the idea)
$('.btn2').on("click", function() {
var myId = $(this).parent().next().attr("id"); // or store this as a data attribute on the button or somewhere else conveniently accessible
console.log("Get data for ", myId);
$.get("/whatever?id=" + myId, function(response) {
// assuming that ajax call returns html, just inject it into the div:
$('#" + myId').html(response);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='topShow bg-Show-Main'>
<div class='btnContainer2'>
<a href="#" class='btn2 red'>Buy Tickets</a>
</div>
<div id="Show1-Oct">
</div>
<div class='clear'></div>
<div class='btnContainer2'>
<a href="#" class='btn2 red'>Buy Tickets</a>
</div>
<div id="Show2-Oct">
</div>
<div class='clear'></div>
</div>