Getting weird problem on mobile (Chrome and Safari).
I have a modal say with id xyzModal with me. I have a link which opens this modal.On desktop link appears on hover only.
So on the mobile to overcome hover effect what I have done is display the link always and oveeride the hover method
$('#link').hover(function(ev){
ev.preventDefault();
$('#xyzModal').modal()
});
Problem with this is modal comes and disappears immediately in fraction of second.
Strange part is its working fine if I do $('#xyzModal').modal() directly on the console. Moreover to the amazement modal working fine on the long press of the link also. Has anybody come across this behaviour.Its working fine in mobile firefox though.Cannot create a fiddle as fiddle will override my current library setup. Just tell me in which direction I need to search. Getting pretty clueless over here.
Thanks for your help in advance.
The easiest way to do this is to use Bootstrap's good ol' query classes (show/hide elements responsively) to swap between two modals in desktop and mobile and placing two buttons under query classes too.
Something like this:
HTML:
<!--BUTTONS-->
<div class="hidden-xs" id="link1">Open Modal</div>
<div class="visible-xs" id="link2">Open Modal</div>
<!--MODALS-->
<div id="xyzModal1" class="hidden-xs">
<!--modal codes here-->
</div>
<div id="xyzModal2" class="visible-xs">
<!--modal codes here-->
</div>
JS:
$('#link1').hover(function(){
// place modal xyzModal1 code here
});
$("#link2").click(function() {
// place modal xyzModal2 code here
});
Related
Having trouble with bootstraps collapse. I have 2 menu items, with a dropdown collapse. I'm trying to alternate/switch them so I DONT get to see both at the same time. I've tried using 'toggle:false' but that does't seem to be working with bootstrap.
Please see the codepen for a working demonstration. Currently am using data- tags to create the functionality.
I'm wondering whether the DOM treats the collapse functionality as 2 separate things and therefore doesn't correlate them together.
So I have
<div class="search-bar>...</div>
<div class="collapse" id="collapseExample">...</div>
<div class="collapse" id="collapseFilter">...</div>
Inside the search bar I have 2 anchor elements which trigger the collapse. And then a non-related drop-down.
<a id="search-button" data-toggle="collapse" href="#collapseExample">
<span class="icon-search"></span>Search
</a> <!--Simplified -->
So I'm not sure why BOTH dropdown collapse elements come down. I want it to work just like the accordion style
Thanks in advance.
You can force hiding other menu like this:
$("#search-button").click(function() {
$('#collapseFilter').collapse('hide');
});
$("#filter-button").click(function() {
$('#collapseExample').collapse('hide');
});
See JsFiddle of your demonstration. I hope it helps, Thanks
on the following site: http://www.strategix.co.za/ on that page you will see the heading OUR SOLUTIONS with the 8 hover over boxes.
what I'm trying to do is to wrap a href around each box so that not only when you hover over does it display the right side div but you can click on the box which takes you to the relevant page.
so in the code:
<div class="left2">
<div class="box2">Microsoft Dynamics ERP</div>
</div>
I try say:
<div class="left2">
<div class="box2">Microsoft Dynamics ERP</div>
</div>
But the minute I save it in wordpress it removes the ahref. I also tried this:
<div class="left2">
<div class="box2"><div>Microsoft Dynamics ERP</div></div>
</div>
But that didnt save either. I just need each seperate whole box to have an href.
Will appreciate some help.
Thanks.
Try
<div class="left2">
<div class="box2" onclick="javascript:window.location.href='link';">Microsoft Dynamics ERP</div>
</div>
Using javascript is one way to apply a link to an entire div.
I am using twitter Bootstrap for expand-collapse effect and everythings is working but I have a problem when I click on some lement then all my divs with carousel class are expanding, does anyone knows how to solve this here is code example:
<div class="description collapse-group">
<!-- This div with class mehr-pfeil I am using as trigger for collapse. If user clicks on it, the content of collapse element should show.-->
<div class="mehr-pfeil" onclick=".collapse('toggle');">
<!-- But if user clicks on heading <a> then it shall go directly to article -->
<a href="/?id=2500,1111142">
<span>04.07.2014</span>
<span class="orange"> </span><span>Some content <span>
</a>
<p class="collapse">Some content</p>
</div>
<p class="collapse">Nicht das Erfinden neuer Themen, sondern das Umsetzen bestehender bzw. der in den Klausuren definierten.</p>
</div>
ps. this is just one example of my content which should be triggered with collapse. Just imagine that you have more than one.
UPDATE: Also problem appears always when I click on collapse element. For instance, if one element was closed then another opens and vice versa.
So I wanted to know how to triger tis action only for one lement with js:
This on click event I am currently using:
onclick="$(\'#main-content\').find(\'.collapse\').collapse(\'toggle\');">'."\n";
If you follow the example here you should be able to correctly implement the expand-collapse effect.
It's a little unclear to me what you're trying to ask; your explanation isn't very clear to me and I'm a little unsure what your code is trying to accomplish. BUT from what I can tell, the source of your issue may be the lack of id and href attributes in your tags.
An example might be something like this:
<div class="panel">
<a data-toggle="collapse" href="#collapsableDiv">Click me!</a>
<div id="collapsableDiv" class="panel-collapse collapse">
<p>Nicht das Erfinden neuer...</p>
</div>
</div>
I don't have the time to create a JSFiddle and check my work, but that's an example that should work for the fundamental basics of a bootstrap collapse. As long as you have bootstrap.js in your project you shouldn't need any custom JavaScript.
IMO using jQuery effects is cleaner and easier than Bootstrap; I am currently working on a project that was using Bootstrap collapse but the animation randomly stopped working, so I switched to using jQuery slide effects. Consider looking into that if bootstrap gives you too much trouble.
Is it possible to run a Zurb TwentyTwenty (before and after slider view) plugin inside a Foundation Reveal Modal? I can get the modal to fire and the Header is shown, but not the plugin. The plugin does work on the page in a standard column and I even tried commenting it out to see if that was it. Here is the code I set for the modal:
<!-- Modal Box -->
<div id="myModal2" class="reveal-modal">
<h3><font color="red">See the difference we can make</h3></font></hr>
<div class="twentytwenty-container">
<img src="img/rjh_before.jpg" />
<img src="img/rjh_after.jpg" />
</div>
<a class="close-reveal-modal">×</a>
</div>
<!-- Modal Box end -->
And here is the trigger link:
Modal Version of the 20/20 slider
This is the first project I have done with Foundation and though I am learning fast, this one has me stumped. Any help would be greatly appreciated!
I found the answer myself; it's a bug in Reveal. Found on GitHub here:
Squashed picture when using Orbit in a Reveal - Issue #2809
Added this code before the script for reveal:
var resize_window = function(e) {
$(window).trigger('resize');
}
$(document).foundation('reveal', {'opened' : resize_window});
<!-- Not used in my case, but additionally for running Orbit -->
$(document).foundation('orbit')
Works a treat!
I'm trying to replicate a Facebook wall-like effect where hovering over a feed item displays a "Delete" button. The button is invisible on page load, but hovering over the item displays that particular item's delete button. This is achieved with jQuery and the CSS display property.
This works all well and good in browsers such as Safari, Chrome and Firefox, but come to Internet Explorer 7 and it's a no-go.
Here's an example:
http://www.woohoobingo.com/wall.html
The above link is a rendered page within the site featuring the wall, with the hover feature working in Safari et al but not Internet Explorer 7 (untested in other versions due to lack of resources).
If any one could shed some light on how to rectify this problem so IE adds the hover class when hovering over the list item and not the text within the list item only, then that would be great.
Hi #Martin it is working but somehow the delete button is not being considered a part of the div or container which is show it on hover. I've written the stuff below and it is working well. You may get any clues from this.
<div id="divA" style="border:1px dotted white;width:500px;clear:both;">
<div id="divLogo" style="height:20px;width:20px;overflow:hidden;float:left;">
<img src="arrow.png" alt="logo" style="height:20px;width:20px;"/>
</div>
<div>Hello World this is the message written on the wall.....</div>
<div id="divDelBtn" style="width:50px;height:25px;top:1px;float:right;">
<span style="background-color:#c0c0c0;color:#ffeeee;display:none;">Delete</span>
</div>
<div id="otherStuff" style="font-size:70%;color:#0f0f33;">
posted by #me on 18/jan/2010 12:34 PM</div>
</div>
<script type="text/javascript">
$(function(){
$("#divA").hover(function(){
$("#divA").css("border-color","red");
$("#divA #divDelBtn span").show();
},
function(){
$("#divA").css("border-color","white");
$("#divA #divDelBtn span").hide();
});
});
</script>