How to create an infinite fullscreen slider like this one? - javascript

I want to create an infinite fullscreen slider in Html + Css + JavaScript (Plural). I don't want to use libraries, like "Slick" or something like this. The first slide should be in the senter. I need to see half of the third block and half of the last block(example in the photo). Can anyone help, please ?
Example: https://i.stack.imgur.com/FORxN.jpg

You can do a full-screen container and then place your images in it, and with a little bit of JS you can achieve it.
Create a div and inside the div, place your images.
.container{
width: 100%;
height: 100%;
img{
width: 100%;
height: auto;
This is for the HTML and CSS, but you can always mess around with the height and width and finalize with what suits you and for JS I'd recommend you watching this video or this video. I've previously watched'em both and they are pretty easy to understand.

Related

What to change in order for this to shrink?

So I wanted to make a website which is pc related. I was into coding a few years ago, and I decided to pick it up again. I came across the following problem.
https://imgur.com/VjZaUEZ
If you look at this picture, you can see the part of the site which I made.
I want it to be responsive so that the text on the left side of the picture (explanation of CPU) is shrinking when I shrink my browser.
However, this is happening:
https://imgur.com/LBaHlOu
I want this text which is beneath the picture, to be next to it and shrinking. After a few hours trying things with display: and margin: etc, I decided to ask you guys.
Here are my codes (I know the codes aren't the best):
CSS: https://imgur.com/UOThxjv
HTML: https://imgur.com/DAhC6dx
if you need any clarification, please ask me.
You need to set divs around h4 dynamic width to something like 60%. Make div container for img and set its width to 40%. You should use parahraphs instead of heading-4 for text as well.
Modify HTML:
<div class="text">
<p>your text</p>
</div>
<div class="img-div"><img src="pc.png" alt="pc.png" /></div>
CSS:
.text {
width: 60%;
float: left;
}
.img-div {
float: right;
width: 40%;
}
.img-div img {
width: 100%;
height: 100%;
}
Responsive image map
To make the image map responsive you need to use a js script to manipulate coordinates on window resizing or use .SVG images for image map:
Check out this SO question.
JS image map resizer script
All the dimensions and margins in your CSS code are constant pixel lengths.
Instead, you should make them percentages of the window size. For example, you could make the width of a div tag or an image always be 20% of the screen size by putting in this line of CSS to its CSS class as shown below:
width: 20%;

Bootstrap / Css - 2 DIV same height

I've got HTML+CSS code. I need 1st div (row-1, white colored) to take first half of the container height, and 2nd div (row-2, orange-colored) to take the second part.
Here is my html:
http://pastebin.com/ipiEKHBZ
and my css:
http://pastebin.com/jtxw695F
Revised answer: After realising the default approach did not work with your HTML, this should work. You have classes .content-row-1 and 2 respectively. You can use those to tell the corresponding rows to always use a certain portion of the height. For this to work you also need to manually fix the positioning. (Someone correct me if this can be done more elegantly) For example those classes could look something like:
.content-row-1 {
background: #eee;
position: absolute;
top: 10%;
display: block;
height: 40%;
width: 100%;
}
I noticed that your footer already takes 10% of the height and and assumed you did not want any overlap or gaps. For that to work you should also give your header a percentage for height (10% in my example to keep things simple).
And for the future: try using https://jsfiddle.net/ when showing your code samples. I put it together at https://jsfiddle.net/kvbyk3f1/.

How to scroll a large image inside a smaller div using mouse click and drag?

I want to place a large image inside a div and let the user scroll through the image using the mouse (click and drag to the desired direction). How can this effect be achieved?
CSS:
#image{
position: relative;
margin: 0 auto;
width: 600px;
height: 400px;
top: 300px;
background: url("http://www.treasurebeachhotel.com/images/property_assets/treasure/page-bg.jpg") no-repeat;
}
HTML:
<div id="image"></div>
EDIT:
I want to implement this myself in order to gain knowledge, 3rd party frameworks are last resort.
<html>
<body>
<div style="width:200;height:200;overflow:scroll;">
<img src="/home/james/Pictures/scone_ontology.png" />
</div>
</body>
</html>
Check out jQuery UI Draggable. The first example sounds like exactly what you are trying to do:
https://jqueryui.com/draggable/
So you just want 600w 400h div, with a "map" inside that you can scroll around and look at with the mouse? You're very close already.
Have a div with the size you want the end-product to take up. Make sure you set its css to overflow:scroll;. Then put your image inside this div. Your image can ofcourse also be the background-image of a div.
And that's it.
A cool trick would be to wrapp all this up in a div that is slightly smaller, with overflow:hidden. Just small enough to hide ugly scrollbars. But that might be bad usability.

TinyMCE color picker dropdown appears off-screen

This is an issue on Firefox and IE so far that I've tested; the problem does not exist on Chrome.
I'm including two TinyMCE editors on a page with one partially off-screen to start. When I select the color picker dropdown option from the toolbar on the first TinyMCE instance, the dropdown appears where it should. But if I scroll down and select the color picker dropdown in the second instance, that dropdown appears way below the editor and typically off the page.
You can see this in action here: http://jsfiddle.net/nm6wtca3/
Without removing the html, body CSS, what can I do to have the color picker always appear in the correct position?
I've traced the problem down to setting CSS on the html, body elements.
html, body {
width: 100%;
height: 100%;
overflow-x: hidden;
}
The dropdown div has CSS applied to it that is auto-calculated by TinyMCE. It looks something like this:
z-index: 65535;
left: 641.467px;
top: 633px;
width: 162px;
height: 105px;
How it appears in FF (sometimes way worse):
How it appears in Chrome (how it should look):
You did say you don't want to remove any CSS from the html,body, but you didn't say anything about adding to it! This solution is based on the assumption that you can add to the html,body
Solution
html, body {
width: 100%;
height: 100%;
overflow-x: hidden;
position: relative; /* Line added */
}
JSFiddle Example
I hope this helps. In all reality, you really only need to apply position: relative; to the body like so body { position: relative; }
I'm not super familiar with tinymce's colorpicker, but I can see the issue, and I can replicate it reliably: your problem occurs when you have a picker open, and then you scroll. I can replicate this in chrome too. Here's a video.
When I look at the DOM, I see that tinyMCE has created two absolute-positioned divs at the end of document.body, one for each picker. When you open one, their position is updated to reflect the location of the toolbar-button at the time you clicked it, but it never gets updated when you scroll!
So, how to solve this? Well, there are a few possibilities:
Option 1: it looks like tinyMCE provides a method to bind a control to an event (here). With this, you could bind a callback to 'scroll' that repositions the box...
Huh, now that I think of it, you could simply close any open colorpickers whenever a user scrolls ... kinda feels like a cop-out but there's no denying it has the best R.O.I. ;) We'll call that Option 2!
Option 3: depending on the implementation of the colorpicker, you may be able to override where in the DOM those divs get rendered. The API method I saw that looked the most promising is here. Once you have the div inside a relative-positioned parent, you'd also have to make the colorpicker's positioning algorithm smart enough to look in the right place for x and y offset ...when I tried this by just moving the element and mashing in some css by hand in chrome-console, the algorithm still computed x and y offsets based on doc.body, so depending on where you were scrolled at click-time, everything would be out of position
It looks like this issue might be troubling other people as well... maybe they've found a solution but haven't posted anything about it?
I hope this is enough info to get you past the problem... Let me know if you have any questions!
It looks like the problem is caused by overflow-x: hidden;
It may not be the answer you want but removing that or moving it to a page wrapper will solve your problem.
Working Example
html, body {
width: 100%;
height: 100%;
padding:0;
margin:0;
}
#pagewrapper{
overflow-x: hidden;
}
Another option would be to force repositioning on scroll, but honestly this is overkill... I strongly recommend fixing the css instead.
Another working example
$('body').scroll(posfix); // when the body scrolls
$('#mceu_10').click(posfix); // when you click the top font color button
$('#mceu_35').click(posfix); // when you click the bottom font color button
function posfix() {
setTimeout(function () { // hack way to ensure it fires after the menu is shown
$('#mceu_51').css({
top: $('#mceu_10').offset().top + $('#mceu_10').height(), // set top/left based on button's position
left: $('#mceu_10').offset().left + $('#mceu_10').width() / 2
});
$('#mceu_52').css({
top: $('#mceu_35').offset().top + $('#mceu_35').height(),
left: $('#mceu_35').offset().left + $('#mceu_35').width() / 2
});
}, 1);
}
it works on firefox, and Internet Explorer fine
just remove this css code
html, body {
width: 100%;
height: 100%;
overflow-x: hidden;
}
Please take a look at this:
html,
body {
width: auto;
height: auto;
overflow-x: hidden;
}
You can simply set body width and height to auto, then there won't be any need to use position and you don't have to remove anything. I think you do not need to use height: 100% since it will be auto-calculated by TinyMCE. i hope it helped.
Update
Look at the screen shot from chrome and its same in firefox. And i didn't remove any css but just changed..and by putting 100% in css the output will be like :-
Please check this one with auto but not 100%..thank you

hide scrollbar but able to scroll with mouse

I want to hide scrollbar to appear on a long div,but still able to scroll through mouse or keyboard arrow keys.I read another thread here about scrollable.Tried to use that..but could not implement that...could someone guide me how to implement that clearly or is there any other option with jquery or css?
Any help would be greatly appreciated.
Thanks
I'm not 100% sure on the browser compatibility of this, but you can have two div's - an outer div and a inner div. The inner div will have all your content. Your css could then look like this:
#outer {
width: 200px;
height: 200px;
overflow:hidden;
}
#inner {
height: 200px;
width: 225px;
overflow: scroll;
}
That is, the inner block would be wide enough to contain a scrollbar, but have it hidden from sight by the containing div. This worked for me in webkit. You might have to fiddle with the widths to make sure text doesn't get cut off.
That said, I would carefully think about WHY you're trying to do this. This could be a huge usability issue for your users, as they will not have any indication that there is more content within the div.
To do this is add the following css
.div::-webkit-scrollbar {
display: none;
}
This is saying that hey remove the display of the scroll bar but keep the functionality

Categories

Resources