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.
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'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>
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 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/
I'm using this jQuery greyscale plugin. Example page, Developer page.
Now the effect works only in Internet Explorer. I have three images on that page. The first two aren't greyscaled - I can see them always in color (with/without hover effect). The third image is greyscaled, but if I hover the mouse on it I see the greyscaled image of the second image.
This is how I instantiate the greyScale function:
<script type="text/javascript">
jQuery(function() {
// fade in the grayscaled images to avoid visual jump
jQuery("[class^='wp-image-'], [class*=' wp-image-']").hide().fadeIn(1000);
});
// user window.load to ensure images have been loaded
jQuery(window).load(function () {
jQuery("[class^='wp-image-'], [class*=' wp-image-']").greyScale({
// call the plugin with non-defult fadeTime (default: 400ms)
fadeTime: 500,
reverse: false
});
});
</script>
This is the output of the second image in Firebug:
<div class="gsWrapper" style="position: relative; display: inline-block;">
<img width="80" height="80" alt="" src="http://www.adomain.com/wp-content/uploads/2012/04/picture2.jpg" title="Picture" class="size-full wp-image-317 alignnone" style="display: inline;">
</div>
This is the output of the third image in Firebug:
<div class="gsWrapper" style="position: relative; display: inline-block;">
<img width="80" height="80" alt="" src="http://www.adomain.com/wp-content/uploads/2012/04/picture3.jpg" title="Picture 3" class="alignnone size-full wp-image-320" style="display: inline;">
<canvas style="left: 0px; position: absolute; top: 0px;" width="80" height="80" class="gsCanvas"></canvas>
<canvas style="left: 0px; position: absolute; top: 0px;" width="80" height="80" class="gsCanvas"></canvas>
<canvas style="left: 0px; position: absolute; top: 0px; opacity: 1;" width="80" height="80" class="gsCanvas"></canvas>
</div>
Firebug doesn't show me a
In my opinion this feature worked, but now it seems borken. What has changed? How can I locate the error?
I tried to load the scripts in functions.php with wp_enque_script to avoid jQuery conflicts. Also I put my jQuery code below wp_head() in header.php and changed my calls here from $ to jQuery. Currently I'm using jQuery 1.7.2 (tried it with 1.8.2 with the same effect). I also tried to deactivate all plugins, but still the same effect.
Now I saved the page within Internet Explorer and opened it in Firefox. The page then works. It seems it has to do with the rendering?
Edit:
So the plugin works with canvas in FF. Every image should have the a canvasimage:
<div class="gsWrapper" style="position: relative; display: inline-block;">
<img width="80" height="80" alt="" src="http://www.adomain.com/wp-content/uploads/2012/04/image4.jpg" title="image4" class="alignnone size-full wp-image-1515" style="display: inline;">
<canvas style="left: 0px; position: absolute; top: 0px; opacity: 1;" width="80" height="80" class="gsCanvas"></canvas>
</div>
In my case only the last image has a canvas field (here the last image has all canvas fields!). So the code is appended to the wrong elements. The plugin has the following JS-code:
this.each(function(index) {
$(this).wrap('<div class="gsWrapper">');
gsWrapper = $(this).parent();
// ...
So first it wraps an element around it and then it is accessed again. Perhaps the error is in these lines together with index?
Seems I found the error. The domain had an temporary URL. Now the site went online and got a new domain. The script made a proxy request and here it somehow appended to the wrong element.
Now I changed the links in the HTML to the new domain and now it works fine. Nevertheless the proxy request seems to fail and should be improved:
$.getImageData({
url: $(this).attr('src'),
success: $.proxy(function(image) {
can = greyScale(image, image.width, image.height);
if ($options.reverse) { can.appendTo(gsWrapper).css({"display" : "block", "opacity" : "0"}); }
else { can.appendTo(gsWrapper).fadeIn($options.fadeTime); }
}, gsWrapper),
error: function(xhr, text_status){
// silently fail on error
}
});