I've been trying to get jQuery to select a particular element in the JQuery zoom plugin but it doesnt seem to be working
This is the html markup for the zoom region
<div class="zoom" style="width: 60% !important; display: block; position: fixed; overflow: hidden;">
<img src="//cdn.shopify.com/s/files/1/0456/6809/t/3/assets/bx_loader.gif?27021" alt="" class="abs-center-translate loader">
<img src="//cdn.shopify.com/s/files/1/0456/6809/products/568A.jpeg?v=1413437903" class="zoomImg" style="position: absolute; top: -1385.54456824513px; left: -389.68108776267px; opacity: 1; width: 682.5px; height: 1024px; border: none; max-width: none; max-height: none;">
</div>
function showZoomImgSmaller(img) {
var zoomsmall = $('.zoom');
zoomsmall.empty();
zoomsmall.append('{{ "bx_loader.gif" | asset_url | img_tag: "", "abs-center-translate loader" }}');
$('.collectionZoomContainer').show();
zoomsmall.attr( "style","width:60%!important" );
var zoomsmallimg= $('.zoom > img');
console.log(zoomsmallimg.next().get());
$('.zoomImg').attr("style","max-width:500px!important");
zoomsmall.show();
zoomsmall.zoom({url: img, magnify: 0.5});
}
The console returns just a [] for the .zoomImg.get() and an undefined for a .zoomImg.html()
I want to change the css of this particular element and can only do it through jquery.
Any help will be greatly appreciated. Thanks
There is a lot going on here that I cannot see, but my guess is that when you call empty() on your div, you are removing all children of the div (including the .zoomImg class which you are trying to look up later). Instead of removing all elements, you might just want to remove the first image:
function showZoomImgSmaller(img) {
var zoomsmall = $('.zoom');
$('.zoom > .loader').remove(); //change is here
zoomsmall.append('{{ "bx_loader.gif" | asset_url | img_tag: "", "abs-center-translate loader" }}'); //angular? not sure what this does
$('.collectionZoomContainer').show(); //not sure what this
zoomsmall.attr( "style","width:60%!important" );
var zoomsmallimg= $('.zoom > img');
console.log(zoomsmallimg.next().get());
$('.zoomImg').attr("style","max-width:500px!important");
zoomsmall.show();
zoomsmall.zoom({url: img, magnify: 0.5});
}
Hey so I managed to get my style applied by appending css in the head of the page. This style was applied even though the element didnt exist till later.
This is the code I used.
$("<style type='text/css'> .zoomImg{ max-width:200px!important;} </style>").appendTo("head");
Cheers.
Related
I'm not sure if my question makes sense, but,
I'm using jQuery to toggle an image from its off-state to its on-state upon click.
That was hard enough to get to work (I'm rather novice).
The problem is that the on-state is an image with a fair amount of body copy. It obviously does not look as good as it would if it were live type.
I was wondering, if it's even possible, that the on-state be a div with live text that is hidden until the image is clicked.
I have no idea how to go about solving this problem as my knowledge of jQuery is rather limited.
The page is currently being hosted here
Script:
<script type="text/javascript">
$(function(){
$("#click li").click(function (e) {
$("#click li.selected").not(this).removeClass("selected");
$(this).toggleClass("selected");
});
});
</script>
You could include both a div -- initially hidden, with size matching the image -- and the image in each li.
CSS:
.imagetext {
display: none;
height: 50px; /* or whatever */
width: 50px;
}
#click li img {
display: block;
height: 50px; /* or whatever */
width: 50px;
}
#click li.selected img {
display: none;
}
#click .imagetext {
display: block;
}
HTML along the lines of:
<div id="#click">
<ul>
<li>
<img src="..." />
<div class="imagetext">Four score and seven...</div>
</li>
<!-- ... -->
</ul>
</div>
I want to make a 100% width div in a 300px container, how is it posible? tryed postiton relative and absoulte with no success.
.container { margin:0 auto; text-align:center; background-color:black; width: 300px;}
.normalOne { background-color:grey; height: 50px;}
.hundredProcent { background-color:blue; height: 50px; width:100%;}
.normalTwo { background-color:red; height: 50px;}
<div class="container">
<div class="normalOne"></div>
<div class="hundredProcent"></div>
<div class="normalTwo"></div>
</div>
And here is a fiddle http://jsfiddle.net/lamberta/2U893/
I've added one addition div inside div.hundredProcent with following style:
style='position:absolute; background-color:yellow; height: 50px; width:100%;left:0px;'
Check this updated fiddle. You should not set position:relative to .container or
.hundredProcent div's
You can't do that by CSS alone. Use Javascript; something like this
document.getElementsByClassName('hundredProcent')[0].style.width =
document.body.clientWidth+'px';
for instance in the onload handler.
Make sure it works on all browsers that you need it to work on. I'm not even sure if getElementsByClassName is implemented in all modern browsers, so you may need to give the div an id to positively identify it.
I have been having some real issues with CSS!
I have the following set up to centre the #Box div, which works perfectly on everything but mobile browsers. Because the screen size of the mobile browser is so narrow the left hand side keeps getting cut-off. I asked something similar previously and have tried to no avail to adjust it.
I have put the container and layout divs in since last time, but still the same problem occurs. Is there any way that I can adjust the code so that the left hand side doesn't keep getting chopped off?
.pageContainer {
margin-left: auto;
margin-right: auto;
width: 100%;
height: auto;
padding-left: 1.82%;
padding-right: 1.82%;
position:relative; }
#LayoutDiv1 {
clear: both;
margin: auto;
width: 100%;
display: block;
text-align:center;
position: relative; }
#Box {
width: 487px;
height: 181px;
position: absolute;
left: 50%;
top: 236px;
margin-left: -244px;
z-index:6; }
The html:
<body>
<div class="pageContainer">
<div id="LayoutDiv1">
<div id="Twitter">
<img src="images/TwitterNORMAL.png" onmouseover="this.src='images/TwitterHOVER.png'" onmouseout="this.src='images/TwitterNORMAL.png'"/>
</div>
<div id="Facebook">
<img src="images/fbNORMAL.png" onMouseOver="this.src='images/fbHOVER.png'" onMouseOut="this.src='images/fbNORMAL.png'"/>
</div>
<div>
<img id="Box" src="images/BOX.png" width="487" height="181">
</div>
</div>
</div>
</body>
The smarter way in 2012 to do this is to use Media Queries, some inspiration here
You basically create another style sheet which is loaded only for smaller screens. It might seem like an overkill now, but as your website grows, you will thank me for suggesting this (or you cannot ;))
Also, don't do margin-left: -244px;, its hacky and can cause cross browser issues. Show us some HTML and we shall show you a cleaner way.
Are you including a viewport meta tag? It should eliminate any scaling issues you may be having in mobile.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
To you CSS: <div>s are block elements, and their default behavior is to expand the width of their parent (100%). Those CSS declarations aren't necessary.
From your code, and layout, it doesn't look like you need #LayoutDiv1 or to use positioning.
This simpler code takes care of the left-side-cutoff (here's a fiddle):
.pageContainer {
margin:0 auto;
}
#LayoutDiv1 {
margin: auto;
text-align:center;
}
#Box {
width: 487px;
height: 181px;
top: 236px;
margin:236px auto 0;
}
And like a prev poster mentioned, you could add a #media query to load a smaller image for #Box on mobile (you can simply add a line or two [or 200] to your existing CSS file):
#media only screen and (max-width: 767px) {
#Box { background:url('imgs/mobile-hero.jpg'); }
}
I'm using jQuery UI "sortable" plugin to be able to select and sort items.
I set up the plugin to have two lists, one for "available" items, the second for "selected" items.
The plugin works as expected, I can move items from one list to the other.
However, when I remove one item from the list, the height of the list is lowered. Is there any way to fix it?
In fact, i'd like to set the outer border of both list to the initial height of the left items (at the beginning, all items are in the first list)
This picture describe what I want to do:
The red lines are what I'd like. I want both lists to have this size, fixed.
Here is my code (generated from an asp.net webpage actually) :
<script type="text/javascript">
$(function () {
$("#sourceItems").sortable({
connectWith: "#targetItems",
update: function (event, ui) {
$("#selectedUserIDs").val(
$("#targetItems").sortable('toArray')
);
},
placeholder: "ui-state-highlight"
});
$("#targetItems").sortable({
connectWith: "#sourceItems",
placeholder: "ui-state-highlight"
});
$("#sourceItems, #targetItems").disableSelection();
});
</script>
<style type="text/css">
#sourceItems, #targetItems { list-style-type: none; margin: 0; padding: 0; margin-right: 10px; background: #eee; padding: 5px; width: 230px; border:solid 1px black; }
#sourceItems li, #targetItems li { margin: 5px; padding: 5px; width: 200px; height: 12px; }
</style>
<div style="float: left; display: inline-block; width:fill-available">
<p>Available :</p>
<ul id="sourceItems" class="droptrue">
<li class="ui-state-default" id='i1'>item1</li>
<li class="ui-state-default" id='i32'>item2</li>
<li class="ui-state-default" id='i47'>item3</li>
<li class="ui-state-default" id='i46'>item4</li>
</ul>
</div>
<div style="float: left; display: inline-block;">
<p>Selected :</p>
<ul id="targetItems" class="droptrue">
</ul>
</div>
<div style="display: none">
<input name="selectedUserIDs" type="text" id="selectedUserIDs" />
</div>
The hidden input field is my container for storing selected items (posted with the form).
I've tried by adding .height($("#sourceItems).outerHeight()); to both lists, but this does not works.
I came here looking for a similar, but more generalized solution to the same problem. The solution here didn't help me, but I figured it out on my own and thought it might be helpful to share it.
I didn't want the two sortable lists to be fixed, I just wanted them to stay the same height. When you are dealing with a large number of items, having two dynamically sized boxes around the list can make it hard to work with, as the one box is so much smaller than the other. Making both boxes a fixed height is also less than optimal, as then you end up with scrollbars once your number of items in one list exceeds that height. I wanted both boxes to dynamically expand using the built-in functionality of the JQuery sortable, connectWith code, but I also wanted them to both just be set to the larger of the two. To do this I found that you can modify the padding on the lists, and that area will still be an interactable area for purposes of drag-and-drop.
So, to make two connectWith, sortable lists keep the same height, you can add the following handler for the over event:
over: function(event, ui) {
var heightDiff = $("#sourceItems").height() - $("#targetItems").height();
$("#sourceItems").css('padding-bottom', (Math.abs(heightDiff) - heightDiff) / 2 + 'px');
$("#targetItems").css('padding-bottom', (Math.abs(heightDiff) + heightDiff) / 2 + 'px');
}
Here's a fiddler example extending the other example with this event handler: http://jsfiddle.net/TLrn7/
Edit:
$(document).ready(function(){
$("#targetItems").height($("#sourceItems").height());
$("#sourceItems").height($("#sourceItems").height());
});
http://jsfiddle.net/JEY4U/1/
Old Answer:
Use a 'helper' function, which makes sure the dragged elements have proper width and height.
Something like this:
helper: function(event, ui) {
$(ui).width($(ui).width());
$(ui).height($(ui).height());
ui.children().each(function() {
$(this).width($(this).width());
});
return ui;
}
You use it like this:
$(SOME_OBJECT).sortable({
connectWith: ...,
placeholder: ...,
......
helper: function....
});
Of course you can write any costume helper function you'd like.
The jQuery UI list height is set to a specific height using CSS. Example for 300px height.
.ui-autocomplete {
max-height: 300px;
overflow-y: auto;
/* prevent horizontal scrollbar */
overflow-x: hidden;
}
/* IE 6 doesn't support max-height
* we use height instead, but this forces the menu to always be this tall
*/
* html .ui-autocomplete {
height: 300px;
}
Read the documentation here: https://jqueryui.com/autocomplete/#maxheight
Has anybody used XTK with GWT? No matter what I do I get this error "Uncaught Error: Could not find the given container or it has an undefined size."
I have defined the container element in the base html (below), which is accesible via other means (DOM, JQuery, GWT-JSNI), but not by XTK library.
My GWT-JSNI method and container HTML are as following.
Any help or pointers to debug further?
/* GWT JSNI method */
public native void initializeWebgl() /*-{
alert('r ' + $doc.getElementById('r')); // works
var r = new $wnd.X.renderer('r'); // fails ??????? why?
alert("r is" + r);
r.init(); }*-/
<iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' style="position:absolute;width:0;height:0;border:0"></iframe>
<noscript>
<div style="width: 22em; position: absolute; left: 50%; margin-left: -11em; color: red; background-color: white; border: 1px solid red; padding: 4px; font-family: sans-serif">
Your web browser must have JavaScript enabled
in order for this application to display correctly.
</div>
</noscript>
<div id="r" style="background-color: #000000; width: 100%; height: 100%;"></div>
</body>
1) This error was observed in some cases. The check which lets the renderer initialization fail is deprecated and already removed on the 'refactoring' branch. So, soon, this should work out of the box.
2) For now, the simplest workaround is to set the renderer to a fixed height (for testing):
<div id="r" style="background-color: #000000; width: 100%; height: 300px;"></div>
3) It is possible to use CSS to define a min-height on the renderer if the parent element has height 100%. Here information: http://www.gn-webdesign.de/css-tutorials/css-div-height-100.html