I'm trying to make a div with a bunch of childs rotatable with this plugin: https://github.com/trev/Rotatable
The element is draggable by the built in draggable function in jQuery UI. Here is my jQuery code.
$(document).on('mouseover', '.case .input', function(){
$(this).draggable({handle:'.drag'});
$(this).children('.resize.tl').parent().rotatable({ autoHide: false });
});
And here is my markup.
<div class="case">
<div class="case_background"></div>
<div class="case_model">
<!-- This is loaded by ajax -->
<div class="input" data-name="'+n+'">
<div class="drag">
<div class="icon"></div>
</div>
<div class="resize tl">
<div class="topleft"></div>
</div>
<input class="casetext opensans" type="text" name="textfield[]" size="25" value="The text">
<!-- End of ajax load -->
</div>
</div>
</div>
The only thing that is happening is the rotatable plugin does add divs with classes "rotatable-handle ui-draggable" every time you hover it.
How would you solve this? Do you see any problem?
I found out that the handle was what I should use.
$(document).on('mouseover', '.case .input, .case .image', function(){
var tc = $(this);
tc.rotatable({
handle:tc.children('.rotate.left, .rotate.right')
});
return true;
});
<div class="case">
<div class="case_background"></div>
<div class="case_model">
<!-- This is loaded by ajax -->
<div class="input" data-name="'+n+'">
<div class="drag">
<div class="icon"></div>
</div>
<div class="rotate left">
<div class="icon"></div>
</div>
<div class="rotate right">
<div class="icon"></div>
</div>
<input class="casetext opensans" type="text" name="textfield[]" size="25" value="The text">
<!-- End of ajax load -->
</div>
</div>
</div>
Related
Is there any option/s needed so the icons inside nested grid will be clickable?
I have an icon on the parent grid and it's working fine, but when it comes to the icons inside nested grid, nothing happens.
<div class="grid-stack parent-grid">
<div class="grid-stack-item wid-item" data-gs-x="0" data-gs-y="0" data-gs-no-move="true">
<div class="grid-stack-item-content wid-item-content">
<div class="widget-container">
<div class="widget-title">
<span id="wid-title">WIDGET TITLE</span>
<span class="widget-icon icon-enlarge"></span>
<span class="widget-icon icon-bin"></span>
</div>
<div class="widget-body">
<div class="grid-stack widget-component">
<div class='grid-stack-item wid-component-item'>
<div class='grid-stack-item-content'>
<div class='widget-title'>
<span class='widget-icon icon-bin'></span>
</div>
<div class='widget-body'>
<label>Widget 1</label> <br />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(".icon-bin").click(function (e) {
alert("ASD");
});
</script>
I'm currently working on a client script in jQuery and I'm trying to make it as generic as possible.
I'm looking for a way to select a div with the class ".targets" from a button click.
My markup looks something like this:
<form>
<!-- Products section -->
<div class="products">
<div class="container">
<div class="form-group">
<div class="col-md-12">
<button type="button" class="btn-add">Add</button>
</div>
</div>
<div class="targets">
...
</div>
</div>
</div>
<!-- Resources section, slightly different markup -->
<div class="resources">
<div class="container">
<br/>
<div class="form-group">
<button type="button" class="btn-add">Add</button>
</div>
<br/>
<div class="targets">
...
</div>
</div>
</div>
</form>
My jQuery looks like this:
$("form").on("click", "btn-add", function(e){
var targets = $(this).parent().parent().next();
});
This solution works "somehow", but what if the markup changes?
Is there a way in jQuery to select the closest div with the class ".targets" on button click?
Thanks :)
Use (this).closest(".container").find(".targets");
this will select the closest element with the class container and search for an element in that with the class targets
$("form").on("click", ".btn-add", function(e){
var targets = $(this).closest(".container").find(".targets");
console.log($(targets).text().trim())
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<!-- Products section -->
<div class="products">
<div class="container">
<div class="form-group">
<div class="col-md-12">
<button type="button" class="btn-add">Add</button>
</div>
</div>
<div class="targets">
target1
</div>
</div>
</div>
<!-- Resources section, slightly different markup -->
<div class="resources">
<div class="container">
<br/>
<div class="form-group">
<button type="button" class="btn-add">Add</button>
</div>
<br/>
<div class="targets">
target2
</div>
</div>
</div>
</form>
If you know they will always be within the .products element, you could do:
$(this).closest('.products').find('.targets');
A helpful guide for jQuery traversing methods: http://api.jquery.com/category/traversing/
Try this:
$(this).closest('.container').find('.targets')
You could use closest() which searches for selector higher up in tree and find() which searches for selector going down the tree
$(this).closest('.container').find('.targets')
Thanks for trying to help! I'm having an issue with the following code when the page initially loads. The div class 'highlights', which contains the divs 'box' and 'box-2', jumps around the page when loading. I suspect is has something to do with the social media buttons running javascript above the divs but cannot figure out how to get everything to stay still. Here is a link to the site. Thank you all for helping!!
<div class="buttons">
<div class="fb-share-button" data-href="http://www.powerrankingsguru.com/MLB/2015-MLB- power-rankings/week-18.html" data-layout="button_count">
</div>
<div class="twitter-button">Tweet
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s) [0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)) {js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</div>
<div class="g-plus" data-action="share" data-annotation="bubble" data- href="http://www.powerrankingsguru.com/MLB/2015-MLB-power-rankings/week-18.html"> </div>
</div>
<div class="highlights">
<div class="box">
<div class="box-header"><p>What to Watch</p></div>
<div class="box-content">
<div class="game-details">
</div>
<div class="game-overview">
<div class="away-team">
<div class="away-team-logo">
<img src="../../Images/MLB/Los_Angeles_Dodgers_75px.gif">
</div>
<div class="record">
<h6>Dodgers</h6>
<h6 class="lighter">(60-45)</h6>
</div>
</div>
<div class="home-team">
<div class="home-team-logo">
<img src="../../Images/MLB/Pittsburgh_Pirates_75px.gif">
</div>
<div class="record">
<h6>Pirates</h6>
<h6 class="lighter">(61-43)</h6>
</div>
</div>
<div class="symbol">#</div>
</div>
</div>
<div class="date">
<h4><span class="left">Fri Aug 7th - Sun Aug 9th</span></h4>
</div>
</div>
<div class="box2">
<div class="box2-header"><p>Biggest Movers</p></div>
<div class="rise">
<div class="rise-up"><img src=../../Images/arrowGW.gif></div>
<div class="rise-number"><p>5</p></div>
<div class="rise-team"><img src="../../Images/MLB/Toronto_Blue_Jays_75px.gif"></div>
</div>
<div class="fall">
<div class="fall-down"><img src=../../Images/arrowRW.gif></div>
<div class="fall-number"><p>5</p></div>
<div class="fall-team"><img src="../../Images/MLB/Atlanta_Braves_75px.gif"></div>
</div>
</div>
</div>
If you're okay with using javascript you could hide your container box with display: hidden and then in a javascript onload function you would set the display back to block.
Div:
<div id="highlightDiv" class="highlights" style="display: hidden">
...
</div>
onload:
window.onload = function() {
document.getElementById("highlightDiv").style.display = "block";
}
I referred to a few questions related to iframe not working in safari. those answers suggest to use an alternative of iframe(Ajax or jQuery as an alternative to iframe). But i have already developed the website without testing in safari. I don't want to change the implementation at the last development stage.
Issue:
I am trying to integrate google maps iframe into my webpage.
The website changes responsively based on window size. The divs were
initially coded in adobe reflow. Using Edge Animate i have inserted
the html files into these divs.
The problem lies in the fact that when I try to resize google maps
page, the div on the mobile site still shows on the desktop one and
vice versa. This occurs only on Safari browser.
Heres the code i used in edge Animate.
var container = sym.$('mapBox');
var map = '<iframe
src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d2595.2028231859395!2d7.7518645!3d49.4239794!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47966d5189fba81f%3A0x8ab04632090ea019!2sTU+Kaiserslautern!5e0!3m2!1sen!2sde!4v1432133191497"
width="'+container.width()+'" height="'+container.height()+'"
frameborder="0" style="border:0"></iframe>';
container.html(map);
and heres the html page.
</head>
<body>
<div id="primaryContainer" class="primaryContainer clearfix">
<div id="Video" class="clearfix">
<div id=“mapdiv_Stage" class=“EDGE-MAPDIV">
<div id="Logo" class="clearfix">
<div id="logo_Stage" class="EDGE-LOGO">
</div>
</div>
<div id="N" class="clearfix">
<div id="n_Stage" class="EDGE-N">
</div>
</div>
<div id="E" class="clearfix">
<div id="e_Stage" class="EDGE-E">
</div>
</div>
<div id="T" class="clearfix">
<div id="t_Stage" class="EDGE-T">
</div>
</div>
<div id="R" class="clearfix">
<div id="r_Stage" class=“EDGE-R">
</div>
</div>
<div id="M" class="clearfix">
<div id="m_Stage" class="EDGE-M">
</div>
</div>
<div id="S" class="clearfix">
<div id="s_Stage" class="EDGE-S">
</div>
</div>
<div id="M" class="clearfix">
<div id="m_Stage" class="EDGE-M">
</div>
</div>
<div id="I" class="clearfix">
<div id="i_Stage" class="EDGE-I">
</div>
</div>
</div>
<div id="bigsocial" class="clearfix">
<div id="youtube" class="clearfix">
<div id="youtube_Stage" class="EDGE-YOUTUBE">
</div>
</div>
<div id="instagram" class="clearfix">
<div id="instagram_Stage" class="EDGE-INSTAGRAM">
</div>
</div>
<div id="googleplus" class="clearfix">
<div id="googleplus_Stage" class="EDGE-GOOGLE">
</div>
</div>
<div id="wiki" class="clearfix">
<div id="wiki_Stage" class="EDGE-WIKI">
</div>
</div>
<div id="twitter" class="clearfix">
<div id="twitter_Stage" class="EDGE-TWITTER">
</div>
</div>
<div id="facebook" class="clearfix">
<div id="facebook_Stage" class="EDGE-FACEBOOK">
</div>
</div>
</div>
</div>
<div id="Tablet" class="clearfix">
<div id="tab_Stage" class="EDGE-Tab">
</div></div>
<div id="smallsocial" class="clearfix">
<div id="Facebook1" class="clearfix">
<div id="facebook3_Stage" class="EDGE-FACEBOOK3">
</div>
</div>
<div id="Twitter2" class="clearfix">
<div id="twitter3_Stage" class="EDGE-TWITTER3">
</div>
</div>
<div id="Wiki3" class="clearfix">
<div id="wiki3_Stage" class="EDGE-WIKI3">
</div>
</div>
<div id="Youtube4" class="clearfix">
<div id="youtube3_Stage" class="EDGE-YOUTUBE3">
</div>
</div>
<div id="Instagram5" class="clearfix">
<div id="instagram3_Stage" class="EDGE-INSTAGRAM3">
</div>
</div>
<div id="googlelus6" class="clearfix">
<div id="google3_Stage" class="EDGE-GOOGLE3">
</div>
</div></div>
</div>
</body>
</html>
“mapdiv_Stage” is the html with edge animate created map html.
How do I rectify this problem?
screen shot of chrome. This pic shows the code perfectly working in chrome (the map is not shown below a certain size)
screen shot of safari. The map should be hidden if the size reduces below a certain limit. This is not working in safari.
Both the screen shots are taken at the same browser screen size and the functionality is working in chrome and not working in safari.
By default, I have several DIVs hidden and then I fade them in when the user clicks on a certain button. That works fine but when I try to close a .holder DIV using a span within said .holder DIV, only the first one works. When I click the others, nothing happens. I get no error or any sort of visual feedback whatsoever.
The markup:
<div class="holder" id="window_one">
<div class="title_bar">
<p>Window 1</p>
<div class="control_holder">
<span class="controls" id="close">X</span>
<span class="controls" id="minimize">_</span>
</div>
</div>
<div class="interface">
<p>Testing123</p>
</div>
</div>
<div class="calculator" id="window_two">
<div class="title_bar">
<p>Window 2</p>
<div class="control_holder">
<span class="controls" id="close">X</span>
<span class="controls" id="minimize">_</span>
</div>
</div>
<div class="interface">
<p>Testing123</p>
</div>
</div>
The jQuery:
$(document).ready(function() {
$('#close').click(function() {
$(this).parents('.holder').fadeOut(250);
});
});
What exactly am I doing wrong here? I'm using jQuery 1.10.2 if that makes any difference.
I'd demo the code on jsFiddle but is seems to be down atm.
You can not have the same id of two element on the page. If you want to do that give it as a class name like -
<div class="holder" id="window_one">
<div class="title_bar">
<p>Window 1</p>
<div class="control_holder">
<span class="controls close">X</span>
</div>
</div>
<div class="interface">
<p>Testing123</p>
</div>
</div>
<div class="calculator" id="window_two">
<div class="title_bar">
<p>Window 2</p>
<div class="control_holder">
<span class="controls close">X</span>
</div>
</div>
<div class="interface">
<p>Testing123</p>
</div>
</div>
and the Jquery like -
$(document).ready(function() {
$('.close').click(function() {
$(this).parents('.holder').fadeOut(250);
});
});
Hope this will help.
Here is how it should be:
<div class="holder" id="window_one">
<div class="title_bar">
<p>Window 1</p>
<div class="control_holder">
<span class="controls close">X</span>
</div>
</div>
<div class="interface">
<p>Testing123</p>
</div>
</div>
<div class="calculator" id="window_two">
<div class="title_bar">
<p>Window 2</p>
<div class="control_holder">
<span class="controls close">X</span>
</div>
</div>
<div class="interface">
<p>Testing123</p>
</div>
</div>
and the JavaScript:
$(document).ready(function() {
$('.close').click(function(e) {
$(this).parents('.holder').forEach(function(){
$(this).fadeOut(250);
});
e.preventDefault();
});
});