I'm using somehwat unusual navigation, as seen here. When a user mouses over the bars, they slide out into view. All of that is working fine. The problem is, I cannot find the CSS to make the buttons align left of the edge of the screen (as seen in the image), regardless of the display dimensions.
I originally tried:
<style>
#container {width: 600px; height: 25px; position: relative;}
#bar0, #bar1, #bar2, #bar3, #bar4, #bar5 {position: absolute; left: -340px;}";
</style>
Which worked perfectly. But only on my screen. I thought that position:absolute inside position:relative would work regardless of screen dimensions, but was obviously wrong.
I then tried several variations on dynamically adjusting the screen width in container div with a function that runs onload:
function populateArrays() {
for (i = 0; i <= 5; i++) {
position[i] = -340;
bar[i] = document.getElementById("bar" + i.toString());
id[i] = i;
}
var sheet = document.createElement('style');
var sWidth = screen.width;
sheet.innerHTML = "#container {width: " + sWidth + "px; height: 25px; position: relative;} #bar0, #bar1, #bar2, #bar3, #bar4, #bar5 {position: absolute; left: -340px;}";
document.body.appendChild(sheet);
}
But this also did not work.
What is the correct way to align the images to the far left, partially (mostly) off screen, regardless of dimensions?
Thank you
EDIT: HTML was requested. I don't know if this will help, the issue seems to be adjusting the CSS properly (perhaps with JavaScript).
<div id ="container">
<br><br><br><br>
<img src="homeSilverGlassText.png" alt="Home" width="200" height="35" id="bar0" onmouseover="startMove(0)" />
<br><br><br><br>
<img src="aboutSilverGlassText.png" alt="Anout Me" width="200" height="35" id="bar1" onmouseover="startMove(1)" />
<br><br><br><br>
<img src="contactSilverGlassText.png" alt="Contact Me" width="200" height="35" id="bar2" onmouseover="startMove(2)" />
<br><br><br><br>
<img src="gallerySilverGlassText.png" alt="Gallery" width="200" height="35" id="bar3" onmouseover="startMove(3)" />
<br><br><br><br>
<img src="uiSilverGlassText.png" alt="Design" width="200" height="35" id="bar4" onmouseover="startMove(4)" />
<br><br><br><br>
<img src="editSilverGlassText.png" alt="Editor" width="200" height="35" id="bar5" onmouseover="startMove(5)" />
</div>
Links for button clicks have not yet been added.
Thank you
I think I might have what you want. Your code really doesn't do a great job of describing your problem though. You have images that are only 200px wide and you start by moving them 340px to the left so that you won't be able to see them at all. What are you trying to achieve with that? I'm not sure this is one hundred percent what you want, but this HTML/CSS will move half of your images off screen and then slowly (2 seconds) move them to a "normal" position on hover. I only moved them 100px offscreen so you can actually see them. Let me know if you are actually going for a different effect.
#container {
width: 600px;
position: relative;
}
.bar {
position: absolute;
transition: left 2s;
left: -100px;
}
.bar:hover {
left: 0px;
}
<div id="container">
<br><br><br><br>
<img src="https://placehold.it/200x35" alt="Home" width="200" height="35" id="bar0" class="bar" />
<br><br><br><br>
<img src="https://placehold.it/200x35" alt="Anout Me" width="200" height="35" id="bar1" class="bar" />
<br><br><br><br>
<img src="https://placehold.it/200x35" alt="Contact Me" width="200" height="35" id="bar2" class="bar" />
<br><br><br><br>
<img src="https://placehold.it/200x35" alt="Gallery" width="200" height="35" id="bar3" class="bar" />
<br><br><br><br>
<img src="https://placehold.it/200x35" alt="Design" width="200" height="35" id="bar4" class="bar" />
<br><br><br><br>
<img src="https://placehold.it/200x35" alt="Editor" width="200" height="35" id="bar5" class="bar" />
</div>
Related
The HTML code below shows the HTML code where I am using SVG to display pictures and then polygons on the pictures and this is done with D3 using image pagination.
Somehow the images are displayed if I am using an main tag outside of the SVG with the same id and class but as soon as I keep it inside SVG itS displays the SVG BOX but not the image inside the SVG
the reason why i have a main tag can be understood if showImages() function is referred from the javascript code
The javascript code shows how the id and classes are being used in the HTML code.
Also, I want the image to be displayed with its original size and scale so what input should I provide to the SVG tag and img tag in terms of height and width to prevent it from changing the size of the image.
I really need to get this done, this is the last time of my task.
Please help me!
<div class="gallery">
<main id="image-gallery" class="images"> </main>
<svg width="500" height="500">
<polygon id='x' style="stroke:#f00; fill:none;" />
</svg>
</div>
...
Either the image can be displayed using the <img> element outside the SVG or using the <image> element inside the SVG. Here is an example of both where image and SVG are positioned absolute in the container.
.gallery {
display: flex;
gap: 10px;
}
.galleryimage {
position: relative;
width: 250px;
height: 150px;
}
.galleryimage img {
position: absolute;
}
.galleryimage svg {
position: absolute;
}
<div class="gallery">
<div class="galleryimage">
<img src="https://via.placeholder.com/250x150.png" id="image-gallery" class="images" width="250" height="150"/>
<svg width="250" height="150">
<polygon id="x" points="30,30 200,40 100,120 50,110" style="stroke:#f00; fill:none;" />
</svg>
</div>
<div class="galleryimage">
<img src="https://via.placeholder.com/250x150.png" id="image-gallery" class="images" width="250" height="150"/>
<svg width="250" height="150">
<image href="https://via.placeholder.com/250x150.png" width="250" height="150"/>
<polygon id="x" points="30,30 200,40 100,120 50,110" style="stroke:#f00; fill:none;" />
</svg>
</div>
</div>
I want to mask the attachment red box part of the picture any screen resolution; Have any good Suggestions?
attach image:
red box part;
code:
<div style="background-color: fff;height: 100%; width: 100%; overflow: hidden; margin: 0;position:relative;">
<div id="mask1" style="background:red;width:100px;height:100%;position:absolute;left:0top:10px;"></div>
<embed id="swf" width="100%" height="100%" name="plugin" src="http://zd.diyifanwen.com/Files/WordSwf/%E6%9D%A8.swf" type="application/x-shockwave-flash">
<div id="mask2" style="background:blue;width:600px;height:100px;position:absolute;right:0;bottom:0;"></div>
</div>
may be work this solution
add one container & add position relative
<div style="position:relative">
<embed id="swf" width="100%" height="100%" name="plugin" src="http://zd.diyifanwen.com/Files/WordSwf/%E6%9D%A8.swf" type="application/x-shockwave-flash">
<div id="mask2" style="background:blue;width:600px;height:100px;position:absolute;right:0;bottom:0;"></div>
</div>
I am sorry if this is covered somewhere else but I have not been able to find it. I am trying to create an area of my page with three <div>s that rotate on top of each other. I have written this css and code:
#block {
width:1202px;
height: 402px;
overflow: hidden;
margin: auto;
}
.content {
width:1200px;
height:400px;
margin: auto;
}
<div id="block">
<div class="content">
<a name=image1></a>
<img src="/images/imagea.jpg" alt="image1"/>
<img src="/images/button.png" alt="button" style="margin-left: 700px;margin-top: 300px; width:300px;height:75px;"/>
</div>
<div class="content">
<a name=image2></a>
<img src="/images/imagea.jpg" alt="image1"/>
<img src="/images/button.png" alt="button" style="margin-left: 700px;margin-top: 300px; width:300px;height:75px;"/>
</div>
<div class="content">
<a name=image3></a>
<img src="/images/imagea.jpg" alt="image1"/>
<img src="/images/button.png" alt="button" style="margin-left: 700px;margin-top: 300px; width:300px;height:75px;"/>
</div>
</div>
<table style="margin: auto; width:20px;">
<tr>
<td>•</td>
<td>•</td>
<td>•</td>
</tr>
I have not yet played with the formatting as right now it is just theory, but can you tell me how to make the 3 content divs rotate so that each displays for 10 seconds then moves to the next eventually rotating back to the beginning.I know this will likely require php or jquery, but I am uneducated in both.
Thank you for any help that you can offer.
I have those pictures
<img class=img src='a' />
<img class=img src='b' />
<img class=img src='c' />
<img class=img src='d' />
<img class=img src='e' />
And this button
<button id=presstostart>PRESS ME TO START</button>
I want once the button is clicked start showing the pictures one by one, a,b,c,d,e with an interval of 2 seconds amongst them.In JQuery.No plugins....
There are many slider plugins you can use. But personally I would recommend flexslider and nivoslider. They're easy to use and customize. You can also find attributes to set animation speed, pause time, slide direction, etc.
I found an example in this url
http://www.jssor.com/development/index.html
<div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 600px; height: 300px;">
<!-- Slides Container -->
<div u="slides" style="cursor: move; position: absolute; overflow: hidden; left: 0px; top: 0px; width: 600px; height: 300px;">
<div><img u="image" src="image1.jpg" /></div>
<div><img u="image" src="image2.jpg" /></div>
</div>
</div>
<!-- it works the same with all jquery version from 1.x to 2.x -->
<script src="jquery.min.js"></script>
<script src="jssor.slider.mini.js"></script>
<script>
jQuery(document).ready(function ($) {
var options = { $AutoPlay: true };
var jssor_slider1 = new $JssorSlider$('slider1_container', options);
});
</script>
You will have to download the js library from the link above, and instead of on ready you could assign the event to a click of a button.
yet another example...
http://jsfiddle.net/7WL6P/200/
Currently, I have an overflow-x:scroll div, and I'd like to focus on "category_5" by default when page loading finishes.
By default, user needs to scroll to "category_5" and click "category_5". Is it possible to focus on "category_5" when the first time loading finishes?
<div id="category" style="overflow-x:scroll; width:100%; white-space: nowrap; height:20%;">
<img id="category_1" width="auto" height="100%" src="icon_1_s.png" style="position: relative; top:25%;"/>
<img id="category_2" width="auto" height="100%" src="icon_2_d.png" style="position: relative; top:25%;"/>
<img id="category_3" width="auto" height="100%" src="icon_3_d.png" style="position: relative; top:25%;"/>
<img id="category_4" width="auto" height="100%" src="icon_4_d.png" style="position: relative; top:25%;"/>
<img id="category_5" width="auto" height="100%" src="icon_5_d.png" style="position: relative; top:25%;"/>
</div>
Thanks in advance.
Eric
With jquery you can use .scrollLeft() with the position of the category 5 (.offset() or .position()). And to do it on windows load, take a look at onload event.
There are equivalents without jquery.