I have a small problem that I can't figure out.
I have an element inside my page with a scrollbar. This means I got the main page scrollbar and a second scrollbar. I have a button inside that element that triggers a new div with some content inside of it. But that div is outside the view of the element so you need to scroll to see it. This is not really user friendly so I am trying to add a function that when you click on that button it scrolls to the new div.
Picture of element: https://imgur.com/8wIOTqo
button is the gold coloured one
The problem is that it is using the main page scrollbar and not the scrollbar of the element. Does anyone know how to fix this? Here is my code
// Function to open the element and scroll to the ref
function enableOtherAddressActive() {
secondDeliveryAddressRef.current.scrollIntoView();
setOtherAddress(true);
}
<div className="deliveryaddress__different">
{otherAddress ? (
<div className="deliveryaddress__different-btn btn btn--primary" onClick={disableOtherAddressActive}>Afwijkend bezorgadres verwijderen</div>
) : (
<div className="deliveryaddress__different-btn btn btn--primary" onClick={enableOtherAddressActive}>Afwijkend bezorgadres toevoegen</div>
)}
</div>
<div className="deliveryaddress__second" ref={secondDeliveryAddressRef}>
{otherAddress ? (
<div className="deliveryaddress__inner">
<h3 className="deliveryaddress__title">
Afwijkend bezorgadres toevoegen
</h3>
</div>
) : undefined}
</div>
</div>
One of the way to scroll to the element is assigning a id to the div and using scrollInto that
I have done in the codesandbox below refer it shows how to scroll into a particular element even if it is nested scrollbar
Code:
const handleScrollTo = () => {
setTimeout(() => {
document.getElementById(`element`) &&
document.getElementById(`element`).scrollIntoView({
behavior: "smooth",
block: "center"
});
}, 1000);
};
I am trying to create a page with different news articles(each article page directs to a different page that was created). Using modal can I create an environment where the page pop's up in the same window rather than opening in another window? If yes, can someone please help me with the code and example?
Yes, use jQuery modal dialogs. You can have a link or button for each article and when it gets clicked, open a modal dialog with the article's text.
See this JSFiddle for a working example.
<div class='article' id="article1">
<p>This is article 1, etc...</p>
</div>
<button id='article1Button'>Article 1...</button>
<div class='article' id="article2">
<p>This is another article...</p>
</div>
<button id='article2Button'>Article 2...</button>
And the javascript:
$(document).ready(function(){
$(".article").dialog({
autoOpen : false,
resizable : false,
width : 400,
height: 400,
modal : true,
buttons: {
"Close" : function(){
$( this ).dialog( "close" );
}
},
close : function(ev, ui) {
return true;
}
});
$('#article1Button').click(function(){
$("#article1").dialog("open");
})
$('#article2Button').click(function(){
$("#article2").dialog("open");
})
});
I have a simple modal script that worked fine in the past, but for some reason it will refuse to work after the 10th image.
<div class = "images_container"> <!-- Image 1 -->
<div class = "images image_1">
<div class = "hover_alpha">
<div class = "plus">
</div>
</div>
</div>
<div class = "images image_2"> <!-- Image 2 -->
<div class = "hover_alpha">
<div class = "plus">
</div>
</div>
</div>
<div class = "images image_3"> <!-- Image 3 -->
<div class = "hover_alpha">
<div class = "plus">
</div>
</div>
</div>
<div id="image_1_content">
<img src = "images/1.jpg">
</div>
<div id="image_2_content">
<img src = "images/2.jpg">
</div>
<div id="image_3_content">
<img src = "images/3.jpg">
$('.image_1').click(function () {
$('#image_1_content').modal({
close: true,
overlayClose:true,
position: [150,70],
opacity:80,
overlayCss: {backgroundColor:"#fff"}
});
return false;
});
$('.image_2').click(function () {
$('#image_2_content').modal({
close: true,
overlayClose:true,
opacity:80,
position: [150,70],
overlayCss: {backgroundColor:"#fff"}
});
return false;
});
$('.image_3').click(function () {
$('#image_3_content').modal({
close: true,
overlayClose:true,
opacity:80,
position: [150,70],
overlayCss: {backgroundColor:"#fff"}
});
return false;
});
The code is pretty much identical to the 21st image. However, the script refuses to work after the 9th image, starting from the 10th image. I'm baffled as to why or how this is happening. Any input?
Reference: http://spuxystudios.com/cocktails/
You should use a class selector, and iterate through them, or something of that matter to consolidate your code, and use less code. Also, lowers chance of a typo or syntax related bug. Also, it is working, but is being placed out of the viewport. Just zoom out and you will see. It places based on how the element fell on the dom. So just fix how you are placing the modal. Thats all!
On the page you referenced to you change position: [150, 70] to higher values, this and position: fixed makes your modal appear where it is not visible. Put position: [150, 70] everywhere. Also, you should follow #Casey advice and use iteration to reduce amount of code.
Looking at the source of the site, you can see that the position is actually different for each row of images. Here is an example:
$('.image_6').click(function () {
$('#image_6_content').modal({
close: true,
overlayClose:true,
opacity:80,
position: [550,30],
overlayCss: {backgroundColor:"#fff"}
});
return false;
});
$('.image_7').click(function () {
$('#image_7_content').modal({
close: true,
overlayClose:true,
opacity:80,
position: [950,30],
overlayCss: {backgroundColor:"#fff"}
});
return false;
});
As others have said, this is better done with a generic class.
You can put the content in the same div and hide it by default.
<div class="cocktails">
<div class="cocktail">
<img 1>
<div class="more_info">modal content</div>
</div>
<div class="cocktail">
<img 2>
<div class="more_info">modal content</div>
</div>
</div>
$('.cocktails').on('click', 'img', function() {
$('.more_info', $(this)).modal({
close: true,
overlayClose:true,
opacity:80,
position: [150,70],
overlayCss: {backgroundColor:"#fff"}
});
like others have noticed, the positioning is not consistent. i dont see your CSS but maybe you can get a quick win with some nifty CSS setting. Try positioning the pop-up relative to the window
I've been looking on ways on how to make controls/button to manipulate turn.js to make my own magazine web page.
here is my html script
<div id="magazine">
<div style="background-image:url(pages/01.jpg);"></div>
<div style="background-image:url(pages/02.jpg);"></div>
<div style="background-image:url(pages/03.jpg);"></div>
<div style="background-image:url(pages/04.jpg);"></div>
<div style="background-image:url(pages/05.jpg);"></div>
<div style="background-image:url(pages/06.jpg);"></div>
</div>
<a onclick="turntopage(4)">Go to page 4</a>
and i want to make some button controls like Go to page 4.
here is the javascript
//initialize turn js
$(window).ready(function() {
$('#magazine').turn({
display: 'double',
acceleration: true,
gradients: !$.isTouch,
elevation:50,
when: {
turned: function(e, page) {
/*console.log('Current view: ', $(this).turn('view'));*/
}
}
});
});
there is already way to do some next and previous controls
$(window).bind('keydown', function(e){
if (e.keyCode==37)
$('#magazine').turn('previous');
else if (e.keyCode==39)
$('#magazine').turn('next');
});
and i want to make controls for go to where ever page i want to go. is there a way i can do this?
There is method for that
$("#magazine").turn("page",4) // goto page number 4
http://www.turnjs.com/#samples/docs/18
I have a gallery where I want the User to Open a Picture with Colorbox. (Then send the Picture with a Mail or Print it etc.)
This Site must be programmed dynamically because it has to work on an IPad too.
Now to the actual Problem:
This div should be shown in the Colorbox:
<div style = "display:none">
<div id="inline" style="height:100%; width:auto">
<img src="#" id="inline_img" style="max-height:90%; max-width:100%"/>
<div id="buttons">
<button > test </button>
<button > test1 </button>
<button > test2 </button>
</div>
</div>
</div>
And this is the Javascripit function where the div opens up in the colorbox.
$(function(){
//$('.element a').colorbox({});
$('.element a').click(function(){
// Using a selector:
$('#inline_img').attr('src',$(this).find("img").attr('src'));
$.fn.colorbox({
inline:true,
href:"#inline",
maxHeight:'90%',
maxWidth:'90%'
});
return false;
});
$('.element a').colorbox({
onComplete : function() {
$(this).colorbox.resize();
}
});
But the Colorbox always is much bigger than the Picture itself. The Colorbox must be as big as the Image and in the center of the screen.
I'm use the following code and resolve problem.
$('.colorBox').colorbox({
scalePhotos: true,
maxWidth: '100%'
});
That result makes sense to me. You gave colorbox a display:block element with no defined width and asked it to estimate the size, which of course will be 100% of the available width.