I am trying to create a slider but discovered that if a user were to use CTRL+F, the position and the <div> element's offset changed and so the slider no longer works the way is should.
HTML:
<div style="width:100px; height:150px;">
<div style="width:100px; height:100px; overflow:hidden;">
<div id="slider" style="width:200px; height:100px; right:0; position:relative;">
<div style="width:100px; height:100px; float:left;">visible</div>
<div style="width:100px; height:100px; float:left;">hidden</div>
</div>
</div>
<input id="sliderbuttonprev" type="button" style="float:left;" value="Prev">
<input id="sliderbuttonnext" type="button" style="float:right;" value="Next">
</div>
JavaScript (jQuery):
$(document).ready(function() {
$("#sliderbuttonnext").click(function(){
$("#slider").animate({right:"+=100px"});
});
$("#sliderbuttonprev").click(function(){
$("#slider").animate({right:"-=100px"});
});
});
Is there a way to stop CTRL+ F finding the hidden sections?
jsFiddle Demo
You cannot prevent browsers from finding hidden content, but you could potentially disable it for the slides.
For example, if you specify the content within CSS, the browser won't move the content. For example, see here > Is it possible to disable Ctrl + F of find in page?
<div class="word-foobar"></div>
.word-foobar:before {
content: "Foobar";
}
As nickf has suggested, you could easily write some JavaScript code to convert actual text to this method.
http://jsfiddle.net/TaZL2/2/
If you change your animation to marginLeft instead of the right property, the content doesn't seem to scroll when searching. (Chrome/Mac OSX)
However, a user would still see there was a match and be stumped as to where it could be.
$("#sliderbuttonnext").click(function () {
$("#slider").animate({
marginLeft: "-=100px"
});
});
$("#sliderbuttonprev").click(function () {
$("#slider").animate({
marginLeft: "+=100px"
});
});
i came up with a solution that uses a variable to track the position of the main wrapping div and hides ".hide()" the content div that's not visible. hidden content is not visible to ctrl f.
HTML:
<div style="width:100px; height:150px;">
<div style="width:100px; height:100px; overflow:hidden;">
<div id="slider" style="width:200px; height:100px; right:0; position:relative;">
<div style="width:100px; height:100px; float:left;">
<div id="id1">visible</div>
</div>
<div style="width:100px; height:100px; float:left;">
<div id="id2">hidden</div>
</div>
</div>
</div>
<input id="sliderbuttonprev" type="button" style="float:left;" value="Prev">
<input id="sliderbuttonnext" type="button" style="float:right;" value="Next">
JQuery
<script>
var pos = 0;
function showfunct(x){
if(x==0)$("#id1").show();
if(x==100)$("#id2").show();
}
function hidefunct(x){
if(!(x==0))$("#id1").hide();
if(!(x==100))$("#id2").hide();
}
showfunct(pos);
hidefunct(pos);
$(document).ready(function() {
$("#sliderbuttonnext").click(function(){
pos+=100;
showfunct(pos);
$("#slider").animate({right:"+=100px"});
$("#slider").promise().done(function(){
hidefunct(pos);
});
});
$("#sliderbuttonprev").click(function(){
pos-=100;
showfunct(pos);
$("#slider").animate({right:"-=100px"});
$("#slider").promise().done(function(){
hidefunct(pos);
});
});
});
</script>
Related
I am trying to create a zoom in / zoom out function for images in an article for the website www.nhadatsonnghia.com. When everything worked fine, an error occurred that jquery only works for the first image in the first tag, and the images in each subsequent tag cannot zoom in / zoom out. After running only the first image has class style="transform: scale (1);".
You can see it working here
So how should I fix to zoom in/zoom out each image in each div? I would appreciate it if you suggest me how to fix this!
Thanks very much!
Here is the code
Jquery
$(function() {
$('.post-header .desc-image-list .full .natural-thumbnail #img').data('scale', '1');
$('#nav input').on('click', function() {
var scale = parseInt($('#img').data('scale')*10,10),
nScale = $(this).index()===0 ? scale+1 : scale-1;
nScale = parseFloat(parseInt(nScale,10)/10);
$('#img').data('scale', nScale).css('transform', 'scale('+nScale+')');
});
});
HTML
<div class="post-header">
<div class="desc-image-list">
<div class="full">
<div class="natural-thumbnail">
<img id="img" src="image1.img"> // After running only the first image has class style="transform: scale (1);"
<div id="nav">
<input type="button" value="Zoom in">
<input type="button" value="Zoom out">
</div>
</div>
<div class="natural-thumbnail" style="height: 600px;">
<img id="img" src="image2.img">
<div id="nav">
<input type="button" value="Zoom in">
<input type="button" value="Zoom out">
</div>
</div>
<div class="natural-thumbnail" style="height: 0;">
<img id="img" src="image3.img">
<div id="nav">
<input type="button" value="Zoom in">
<input type="button" value="Zoom out">
</div>
</div>
</div>
</div>
</div>
CSS
#nav {position: sticky; bottom: 20px; left: 50%; margin-left: -50px;}
#nav input {padding: 5px; font-size: 15px; cursor: pointer;}
In addition to #freedomn-m answer.
You can use img tag as a css selector .natural-thumbnail img you don't need any class. update below js and will work fine.
$(function() {
$('.post-header .desc-image-list .full .natural-thumbnail img').data('scale', '1');
$('#nav input').on('click', function() {
var scale = parseInt($('.natural-thumbnail img').data('scale')*10,10),
nScale = $(this).index()===0 ? scale+1 : scale-1;
nScale = parseFloat(parseInt(nScale,10)/10);
$('#img').data('scale', nScale).css('transform', 'scale('+nScale+')');
});
});
Id of element should be unique on one html page.
you can use this
$(this).parent().siblings('img').data('scale', nScale).css('transform', 'scale('+nScale+')');
On mu profile pages I have a small div where I display awards for doing different things. to save space the div is really small but I was gone have a horizontal scroll using buttons.
<div class="award-wrapper fr" style="width:19%; margin:auto;">
<h3 class="award-title"><i class="fa fa-trophy"></i> Awards</h3>
<div class="award-content" id="inner outer" style=" margin:0 auto; text-align:center;">
<div style="float:left; height:100%; left:0; position:absolute;">
<input type="button" value="«" class="scroll_button" id="left-button"/>
</div>
<div id="myDiv" style="float: left;">
<?php include"award.php"; ?>
</div>
<div style="float:right; height:100%; right:0; position:absolute;">
<input type="button" value="»" class="scroll_button" id="right-button"/>
</div>
</div>
</div>
.scroll_button {
opacity: 0.5;
color:#fff;
padding:3px;
height:100%;
}
.scroll_button:hover {
opacity: 0.8;
color:#05c7f7;
}
.scroll_button:active {
color:#05c7f7;
opacity: 0.8;
background:#08090a;
}
not sure if any other parts of my code is necessary
If you mean having a left button to force the scrollbar left, and a similiar right to force it right, it's definitely so plausible.
https://jsfiddle.net/5ug583ff/
var button = document.getElementById('slide');
button.onclick = function () {
document.getElementById('container').scrollLeft += 20;
};
Code example found here: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollLeft
I am not 100% sure if this is the answer to your question as I didn't fully understand your question.
If you want to allow horizontal scrolling in your awards div...
Replace this:
<div id="myDiv" style="float: left;">
<?php include"award.php"; ?>
</div>
With this:
<div id="myDiv" style="float: left; overflow-x:scroll;">
<?php include"award.php"; ?>
</div>
I found lots of information on the web about how to remove, attach, prepend, etc. Element from and to DIV. Unfortunately I have a hard time making it work.
In my project, I will have to attach element to div and move them around on a grid (each grid cell being a div of it's own) Bellow is a small script which mimics what I'm trying to do.
Here's the example (here's a link to JSFiddle : http://jsfiddle.net/mgR5b/25/):
HTML:
<div id="LeftAndRightRow1" style="display:inline-block; height:100%;width:100%;border:1px solid black; background-color: red;">
<div id="Left" style="display:inline-block; height:100%;width:45%; border:1px solid black; background-color: blue;">
<button id="B1">B1</button>
</div>
<div id="Right" style="display:inline-block; height:100%;width:45%;border:1px solid black; background-color: pink;">
<button id="B2">B2</button>
</div>
</div>
<div id="LeftAndRightRow2" style="display:inline-block; height:100%;width:100%;border:1px solid black; background-color: red;">
<div id="Left2" style="display:inline-block; height:100%;width:45%; border:1px solid black; background-color: yellow;">
<button id="B3">B3</button>
</div>
<div id="Right2" style="display:inline-block; height:100%;width:45%;border:1px solid black; background-color: purple;">
<button id="B4">B4</button>
</div>
</div>
<br>
<button id="SwapButton">Swap Button</button>
JQuery / JavaScript
Now, imagine I want to swap the container "Left" (I want to move the Div, not the button) to the second row (LeftAndRightRwo2).
I tried various things but not of them worked... My last attempt:
$(document).ready(function () {
$("#SwapButton").click(function () {
alert('trying to swap');
$("#Left").remove();
$("#LeftAndRightRow2").append($("#Left"));
});
});
etc.
None of what I tried worked.
Can someone help understand how to move div from one place to another.
Thank you
When you remove an element, it is no longer on the DOM. If you want to move a DOM element like that you need to store it in a variable. Also you should use detach instead of remove as it is more efficient in this case.
$(document).ready(function () {
$("#SwapButton").click(function () {
var left = $('#Left');
left.detach();
$("#LeftAndRightRow2").append(left);
});
});
When you use $("#Left").remove() you are actually removing it from the DOM, so you can't recall it later with $("#LeftAndRightRow2").append($("#Left"));.
Try to save it, like this, in a variable:
JS
$("#SwapButton").click(function () {
alert('trying to swap');
var left = $("#Left");
$(left).remove();
$("#LeftAndRightRow2").append($(left));
});
Now the entire div moves from the right to the left.
fiddle
http://jsfiddle.net/mgR5b/26/
I think your problem is more of CSS and less in JS I have changed your mark up and CSS to get the result you are looking for
Markup
<div id="LeftAndRightRow1" class="rows">
<div id="Left">
<button id="B1">B1</button>
</div>
<div id="Right">
<button id="B2">B2</button>
</div>
</div>
<div id="LeftAndRightRow2" class="rows">
<div id="Left2">
<button id="B3">B3</button>
</div>
<div id="Right2">
<button id="B4">B4</button>
</div>
</div>
<br style="clear:both;" />
<button id="SwapButton">Swap Button</button>
JS
$(document).ready(function () {
$("#SwapButton").click(function () {
//alert('trying to swap');
// $("#Left").remove();
$("#LeftAndRightRow2").append($("#Left"));
});
});
CSS
.rows{
display:block;
clear:left;
}
.rows div{
float:left;
}
JSFIDDLE
So I have browsed all over, including these posts:
Jquery change image on click
JQuery - how can I change an image src on click of a link
http://www.kirupa.com/forum/showthread.php?301972-Swap-image-on-click-Anyone
and other links as well and I guess I don't understand how it works and can't get it to work.
Here is what I have so far:
HTML:
<div style="width:475px; height:230px; background-color:#c1bfbf;">
<div style="width:450px; height:220px; position:relative; overflow:hidden; float:left;">
<ul style="width:450px; height:220px; list-style:none; padding:0px; border:0px; margin:0px; position:relative; float:left;">
<li id="first" style="padding:0px; border:0px; margin:0px;"><img src="images/imagegraph2.png" /></li>
<li id="second" style="padding:0px; border:0px; margin:0px;"><img src="images/imagegraph1.png" /></li>
</ul>
</div>
<div style="width:25px; height:110px; position:relative; float:left;">
<img src="images/2nd.png" />
</div>
<div style="width:25px; height:110px; position:relative; float:left;">
<img src="images/1st.png" />
</div>
</div>
This code works using anchor tags, but the problem is it pulls the page down to the anchor which I don't want. So I moved on to jQuery and image swaps. I've implementing other peoples codes to see if they work and I can't get them to work. I've used this jQuery code:
$(function () {
$('.menulink').click(function () {
$("#bg").attr('src', "images/imagegraph1.png");
return false;
});
});
Matched up with this HTML:
switch me
<img src="images/imagegraph2.png" id="bg" />
And all that happens is the showing of imagegraph2.png and not the switching of imagegraph1.png. Usually when you do and then hit the "=" sign, a list of possible links comes up for your image. When its in Javascript, it doesn't do that, you just put what folder/name of file. So I'm sure I'll get some negative votes here, but I have exhausted all avenue's to get this to work.
Try e.preventDefault();
$(function () {
$('.menulink').click(function (e) {
e.preventDefault();
$("#bg").attr('src', "images/imagegraph1.png");
});
});
I have a large image, and a bunch of divs that I'm using as fake buttons on top of said image. Currently, I'm using absolute positioning to place the divs where I want them to be, but I've got a lot of divs, and finding the x/y coords by trial and error is time I don't want to take. Is there an easier way to position them, or am I stuck?
I'm using jQuery and Javascript in this project, so these can be used for solutions.
CSS:
#test0 {
position:absolute;
left:381px;
bottom:100px;
}
HTML:
<div id="image">
<div id="test0" class="button" onclick="$('#modal').dialog('open');" style="postion:absolute">
Click me to test Modal!
</div>
<div id="test1" class="button" onclick="$('#modal').dialog('open');" style="postion:absolute">
Click me to test the same Modal!
</div>
<img src="testImage.jpg" alt="testtest" />
</div>
HTML:
<div id="image">
<div id="container-of-fake-divs">
<div class="fake-div">FAKE DIV</div>
<div class="fake-div">FAKE DIV</div>
</div>
<img src="image.jpg" />
</div>
STYLE:
#image { position:relative; }
#container-of-fake-divs { position:absolute; top:0; left:0; }
.fake-div { display:block; }