I have a page of list of products with a return button to redirect to the homepage.
I want after the redirection to the homepage, a scroll down to a specific div ( in my case, a carousel of products)
I did the scroll, but it works every time the homepage is loaded, but I want the scroll only after clicking to the return button, how can I do that please ?
there is some code :
list of product page :
<a href="{{ path('home_index') }}" class="return-ad">
<img src="{{ app.request.getBaseURL()/arrow-white-left.png">
</a>
homepage :
<div class="row align-items-stretch">
Some code here
</div>
<script>
$(".return-ad").ready(function() {
$('html,body').animate({
scrollTop: $(".align-items-stretch").offset().top},
1000);
});
</script>
Someone can help me please ? I'm new on Jquery and JS
Thanks in advance
To achieve this you could add a fragment to the URL which can be detected when the home page next loads:
In the product page add a # fragment to the URL:
<a href="{{ path('home_index') }}#foo" class="return-ad">
<img src="{{ app.request.getBaseURL()/arrow-white-left.png">
</a>
Then in the home page, detect that fragment and perform the animation:
jQuery($ => {
if (window.location.hash && window.location.hash.substring(1) === 'foo') {
$('html,body').animate({
scrollTop: $(".align-items-stretch").offset().top
}, 1000);
}
});
Also note that the ready() method should be called on the document, not an element in the DOM. I amended the example above to use the short-form of a document.ready event handler
Related
I'm creating a website using Django, and I want the link in the navbar (when clicked) to smoothscroll to the element that I want. This is what I have:
base.html
<li>
<a class="nav-item nav-link" href = '' class='scroll-about'>About</a>
</li>
//unrelated elements
<script>
// scroll into view
document.querySelector('.scroll-about').addEventListener('click', function(e) {
e.preventDefault();
document.querySelector('.about').scrollIntoView({ behavior: 'smooth' });
});
home.html
<div class="about col-12 col-md-6">
<div class="d-flex flex-column align-items-center py-5 text-uppercase">
<h3 class="h3-responsive bg-primary text-center text-white rounded font-weight-bold w-50 px-4 py-2 shadow">About</h3>
<h1 data-easy-reveal = "" class = " h1-reponsive font-weight-bold my-5 ml-3">Our vision is for every business to leave its mark on the digital world</h1>
<h1 data-easy-reveal = "" class = "down h1-reponsive font-weight-bold ml-3">Our vision is to bring them to the next level </h1>
</div>
</div>
The rest of the code works fine, the Django templating is all fine. I just can't seem to get this scroll function to work. I've tried moving the script around the bottom of the html file, and as well as putting it in the head element of the html file. I've also tried using jQuery smooth scroll and it doesn't work either.
the jQuery code I tried (in this case I put scroll-about and about as the respective IDs):
<script>
$("#scroll-about").click(function() {
$([document.documentElement, document.body]).animate({
scrollTop: $("#about").offset().top
}, 2000);
});
</script>
i think that this is what you are trying to do. note that it works just with a tags with href="#something"
$(document).ready(function(){
// Add smooth scrolling to all links
$("a").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="height: 100vh; background: #00ced1">
<a id="1" href="#2">Go to Section 2</a>
</div>
<div style="height: 100vh; background: red;">
<a id="2" href="#1">Go to Section 1</a>
</div>
I've found the solution to the issue, adding this allows it to work:
html {
scroll-behavior: smooth;
}
Ultimately I'm wanting the user to click on the Landing Page next to an image on either Print or Mug. Then on the Order Page have the button for Print/Mug be active and then the image that's associated be marked as well.
So I have in Landing Page the following code:
<ul class="dropdown-menu">
<li>
Print
</li>
<li>
Mug
</li>
</ul>
Then in the Order Page the following code:
<div class="img-container1 image-container" image_var="main_image.jpg">
<%= image_tag('main_image.jpg') %>
<div class="wk-after">
<div class="centered-wk">
<span class="fa fa-check-circle check-circle"></span>
</div>
<div class="centered-wk wk-select">
SELECTED
</div>
</div>
</div>
My thought process was to then grab from the Order Page the image_var attribute and make it active.
So far I've been using:
<script>
function toggleActive() {
var activeElements = document.querySelectorAll('image_var');
activeElements.forEach(function (el) {
el.classList.remove('active');
});
btn.classList.add('active');
}
</script>
This isn't working. I don't know what the best way to grab the image_var or a url parameter. What am I missing?
I've also tried:
<script>
function toggleActive() {
var activeElements = document.querySelectorAll('[image-var]');
activeElements.forEach(function (el) {
el.classList.remove('active');
});
btn.classList.add('active');
}
</script>
With an update to the div on the container to be image-var to match. Still not touching the image.
I feel like this should be working with jQuery:
<script>
$(function(){
$.url.attr('image')
$.url.attr('type')
});
</script>
Wouldn't this be pulling out the main_image.jpg and then the print from type?
Excuse me for I am a javascript beginner and I need some help with a task which is probably really banal, although I've searched for a solution here and didn't find any that I could apply to my case.
I have three buttons. When clicked, each slide-opens a div layer and loads content from an external html file into it.
The problem is that after you click one of them, when you click the next one, it first collapses the div, before loading the content. What I would want is for it to simply change the content of the div, if the div is already open. If not, then to open it first.
And I still want it to be toggle-able, in a way that if you click the same link twice, it closes.
I don't know if I am explaining this correctly so here is a pen, hopefully you will see what I mean:
https://codepen.io/tinat/pen/MvjpJW
HTML:
<a id="first" href="javascript:void;">
First
</a>
<a id="second" href="javascript:void;">
Second
</a>
<a id="third" href="javascript:void;">
Third
</a>
<div id="description">
</div>
JS:
$("#first").click(function(){
$("#description").slideToggle("slow");
$("#description").load("https://codepen.io/tinat/pen/PKGpQy.html #description1");
});
$("#second").click(function(){
$("#description").slideToggle("slow");
$("#description").load("https://codepen.io/tinat/pen/PKGpQy.html #description2");
});
$("#third").click(function(){
$("#description").slideToggle("slow");
$("#description").load("https://codepen.io/tinat/pen/PKGpQy.html #description3");
});
Thanks for any help in advance!
Try add active class to recognize current active tab, and you can check active to determine show content or slide it up.
html
<a class="listen" id="first" href="https://codepen.io/tinat/pen/PKGpQy.html #description1">
First
</a>
<a class="listen" id="second" href="https://codepen.io/tinat/pen/PKGpQy.html #description2">
Second
</a>
<a class="listen" id="third" href="https://codepen.io/tinat/pen/PKGpQy.html #description3">
Third
</a>
<div id="description">
</div>
js
$(".listen").click(function(){
if(!$(this).hasClass("active")){
$(this).addClass("active");
$("#description").slideDown("slow");
$(this).siblings(".listen").removeClass("active");
$("#description").load($(this).attr("href"));
} else {
$(this).removeClass("active");
$("#description").slideUp("slow");
}
return false;
});
https://jsfiddle.net/zt11vkz6/
Updated CodePen here.
You will have to keep track of the active tab if the same HTML element is going to be used for each "description". Here I've used the variable tabId to track this state and created a function onClick to prevent repeating code for each tab.
var tabId = null;
function onClick(id, url) {
if (tabId == id) {
// We've must have clicked again on the active
// tab so close description
$("#description").slideToggle("slow");
tabId = null;
} else {
$("#description").load(url);
if (tabId == null) {
// There is no active tab so open description
$("#description").slideToggle("slow");
}
tabId = id;
}
}
$("#first").click(function(){
onClick(1, "https://codepen.io/tinat/pen/PKGpQy.html #description1");
});
$("#second").click(function(){
onClick(2, "https://codepen.io/tinat/pen/PKGpQy.html #description2");
});
$("#third").click(function(){
onClick(3, "https://codepen.io/tinat/pen/PKGpQy.html #description3");
});
The problem has been discussed several times, but I am yet to see a concrete answer.
Similar/same question : SO question
Suppose that I have index.html:
<div id="index1" data-role="page">
<div data-role="header"><h1>Index 1</h1></div>
<div data-role="content"></div>
<div data-role="footer">
<a data-role="button" id="toshop2">
To Shop 2
</a>
</div>
</div>
and shop.html:
<div id="shop1" data-role="page">
<div data-role="header"><h1>Shop 1</h1></div>
<div data-role="content"></div>
<div data-role="footer">
<a data-role="button" href="#shop2">To Shop 2</a>
<a data-role="button" href="index.html" rel="external">
To Index
</a>
</div>
</div>
<div id="shop2" data-role="page">
<div data-role="header"><h1>Shop 2</h1></div>
<div data-role="content"></div>
<div data-role="footer">
<a data-role="button" href="#shop1">To Shop 1</a>
<a data-role="button" href="index.html" rel="external">
To Index
</a>
</div>
</div>
and I want to do something like:
$('#toshop2').on('click', function() {
$.mobile.changePage("shop.html#shop2");
});
which, as we all know by now, won't work. It'll grab the first DOM page (#shop1 out of shop.html and append it into index.html DOM.
I know that something silly like:
$('#toshop2').on('click', function() {
window.open('shop.html#shop2', '_parent');
});
would work (yes, there won't be a transition).
Questions are (assuming there is no other solution, but to hack):
Can I/should I hack it differently?
Can I somehow still get transition to an external page?
You can request the external document manually and then only insert the portion that you want to the DOM:
//delegate event handler binding to links with a custom class
//(any link that links to a pseudo-page in an external document
$(document).delegate('.my-external-links', 'click', function () {
//get the location of the external document and the requested page (hash)
var theHREF = this.href,
theTarget = '#shop1';
if (theHREF.indexOf('#') > -1) {
theTarget = '#' + theHREF.split('#')[1];
theHREF = theHREF.split('#')[0];
}
//first see if this page is already in the DOM, if so just navigate to it
if ($(theTarget).length) {
$.mobile.changePage($(theTarget));
return;
}
//show the loading spinner
$.mobile.showPageLoadingMsg();
//do AJAX request to get new pages into the DOM
$.ajax({
url : theHREF,
success : function (response) {
//hide the loading spinner
$.mobile.hidePageLoadingMsg();
//find all the `data-role="page"` elements and add them to the DOM
$(response).find('[data-role="page"]').appendTo('body');
//now navigate to the requested page which should be in the DOM
$.mobile.changePage($(theTarget));
},
error : function (jqXHR, textStatus, errorThrown) { /*don't forget to handle errors*/ }
});
return false;
});
I'm pretty sure there is a plugin for this as well, but as you can see it's not that much code or complication.
why don't you try to use changepage twice?
$.mobile.changePage( "shop.html", { transition: "none"} );
$.mobile.changePage( "#shop2", { transition: "slideup"} );
or just use loadPage to load the shop.html into DOM in background and change to #shop2 after?
$.mobile.loadPage( "shop.html" );
$.mobile.changePage( "#shop2", { transition: "slideup"} );
I'm trying implement a button inside a Colorbox that will update the modal and render a form.
An example of this is Pinterest's add functionality. "Homepage > Add a Pin > Pin URL"
I've tried copying Colorbox's inline HTML example.
<script type="text/javascript">
$(document).ready(function () {
$(".inline").colorbox({inline:true, width:"50%"});
$('a[rel="colorbox"]').live("click", function() {
$.colorbox({
open: true,
href: this.href
});
return false;
});
});
</script>
<div style='display:none'>
<div id='inline_content' style='padding:10px; background:#fff;'>
<p><strong>Add a Promotion</strong></p>
<p><a id="click" href="#" style='padding:5px; background:#ccc;'>Click me, it will be preserved!</a></p>
<p><strong>If you try to open a new ColorBox while it is already open, it will update itself with the new content.</strong></p>
<p>Updating Content Example:<br />
<a class="ajax" href="**shared/promotion_form**" rel="colorbox">Add a Promotion</a></p>
</div>
</div>
The problem is that the form is _promotion_form.html.erb so I can't link to it.
Try moving your selector up a level, and updating to jQuery 1.7.1
Maybe something like this:
$('body').on("click", "a[rel="colorbox"]", function() {
So this way you're watching the body for any element that has that selector "a[rel='colorbox']".
Hope this helps.