I am using domtab on my site . ( between 'TOUS LES FILMS' and 'AFFICHAGE HORAIRE' )
However the height is not automatically set, that is why I am trying to use jquery to modify it each time I click to them.
Here is the HTML structure of the tab
<div id="domtab1" class="domtab">
<ul class="domtabs">
<li><a id="fl1A" href="#t1">TOUS LES FILMS</a></li>
<li><a id="fl1B" href="#t2">AFFICHAGE HORAIRE</a></li>
</ul>
<div class="flip1A" id="fli1A">
<h2><a name="t1" id="t1"></a></h2>
<ol class="rounded-list">
<li>Spiderman</li>
<li>Pokemon</li>
<li>X men</li>
<li>Blanche Neige</li>
</ol>
<p>back to menu</p>
</div>
<div id="fli1B" class="flip1B" >
<h2><a name="t2" id="t2"></a></h2>
<div class="heading2">
<hr class="gradient_one" />
<p class="hours_gradient">12h10</p>
</div>
<ol class="rounded-list">
<li>Spiderman</li>
<li>Pokemon</li>
</ol>
...
<p>back to menu</p>
</div>
</div>
And here are the jquery code I tried but none worked:
$('#fl1B').on("click", function (e) {
var maxHeight2 = document.getElementById("fli1B").scrollHeight;
$("#text_var").html(maxHeight2);
$("#flip-tabs").css({
'height': maxHeight2 + 'px'
});
});
$("#fl1B").click(function () {
var maxHeight2 = document.getElementById("fli1B").scrollHeight;
$("#text_var").html(maxHeight2);
$("#flip-tabs").css({
'height': maxHeight2 + 'px'
});
});
$('#fl1B').live('click', function () {
var maxHeight2 = document.getElementById("fli1B").scrollHeight;
$("#text_var").html(maxHeight2);
$("#flip-tabs").css({
'height': maxHeight2 + 'px'
});
});
Your handlers work fine, actually all of them is correct.
I've tried the first one:
$('#fl1B').on("click", function (e) {
var maxHeight2 = document.getElementById("fli1B").scrollHeight;
console.log("New height: " + maxHeight2);
$("#text_var").html(maxHeight2);
$("#flip-tabs").css({
'height': maxHeight2 + 'px'
});
});
There is no element with id flip-tabs in your html, so I cannot tell more about the issue. If this is not the issue itself :)
I've added a div with this ID, so you can see that the css call is working too: Check here: http://jsfiddle.net/balintbako/9WYpL/
I'm assigning the handler in the $(document).ready() block, which can be difference in your code.
Related
I have the following pieces of code in my footer:
<script type="text/javascript">
jQuery(document).ready(function($){
var maxHeight1 = 0; $(".header-primary").each(function(){ if ($(this).height() > maxHeight1) { maxHeight1 = $(this).height(); } }); $(".header-primary").height(maxHeight1);
var maxHeight2 = 0; $(".header-secondary").each(function(){ if ($(this).height() > maxHeight2) { maxHeight2 = $(this).height(); } }); $(".header-secondary").height(maxHeight2);
});
<script type="text/javascript">
jQuery(window).resize(function($){
alert('I fire');
var maxHeight1 = 0; $(".header-primary").each(function(){ if ($(this).height() > maxHeight1) { maxHeight1 = $(this).height(); } }); $(".header-primary").height(maxHeight1);
var maxHeight2 = 0; $(".header-secondary").each(function(){ if ($(this).height() > maxHeight2) { maxHeight2 = $(this).height(); } }); $(".header-secondary").height(maxHeight2);
});
</script>
The first piece does its job properly. When I refresh/open the page, the elements that have the CSS classes mentioned inside this JS code, have the same size (of the biggest one).
When it comes to the window.resize part, it doesn't work at all. I've tried all kinds of wrappers to satisfy Firebug, but even when it doesn't display an error, the script still doesn't work. The alert included for testing purposes works, so window.resize fires properly.
I usually find solutions using the search engine, but this one is an exception. :(
HTML:
<div class="block">
<div class="block-big-item">
<h3 class="header-primary">BIG ITEM</h3>
</div>
<div class="block-small-items">
<div class="block-small-item">
<h3 class="header-secondary">SMALL ITEM</h3>
</div>
<div class="block-small-item">
<h3 class="header-secondary">SMALL ITEM</h3>
</div>
</div>
</div>
I have chosen this way of doing it so i can just drop a hand full of images in to a folder and that's it, I have tried many ways but nothing works, my latest attempt is using
$(".image-container").find("img[src=" + Img + "]").next('img').attr('src');
but still no go.
This is what i have come up with so far, any help would be great, Thank's
<div id="removed-container" style="height: 600px;">
<div id="removed" style="height: 600px;">
<div style="float: left; width: 200px;">
<h1> <span>The Gallery</span> </h1>
<ul id="nav">
<li>Gallery
<ul>
<li>2015</li>
<li>2015</li>
<li>2015</li>
<li>2015</li>
<li>2015</li>
</ul>
</li>
<li>Back to home</li>
</ul>
</div>
<div class="image-container"></div>
<script type="text/javascript"> $(document).ready(function () {
$("a").click(function () {
var dir_path=$(this).data("albumid");
LoadGallery(dir_path);
return false;
});
});
function LoadGallery(dir_path) {
$.ajax({
url: dir_path,
success: function(data) {
$(".image-container").empty();
$(data).find("a:contains(.jpg), a:contains(.png), a:contains(.jpeg)").each(function() {
this.href.replace(window.location.host,"").replace("http:///",""); file=dir_path+$(this).text();
$(".image-container").append($("<a href='java<!-- no -->script:;' class='thumb' data-src='"+file+"'><img src='"+file+"' title='Click to enlarge' alt='#'/></a>"));
if ($(".image-container").children("a").length == 30) {
return false;
}
});
$(".thumb").bind('click', function() {
var Popup="<div class='bg'></div>"+"<div class='wrapper'><img src='<img src=''/>"+"<label href='javascript:;' class='prev-image'>«</label><label href='javascript:;' class='next-image'>»</label><a href='java<!-- no -->script:;' class='close' title='Close'>Close</a>";
Img = $(this).attr("data-src"),
$("body").prepend(Popup);
$(".bg").height($(window).height()*4);
$(".wrapper img").attr("src", Img);
$(".prev-image").bind ('click',function() {
alert("Prev")
})
$(".next-image").bind ('click',function() {
next = $(".image-container").find("img[src=" + Img + "]").next('img').attr('src');
//alert(next)
})
$(".close").bind ('click',function() {
$(this).siblings("img").attr("src", "")
.closest(".wrapper").remove();
$(".bg").remove();
});
});
}
});
} </script>
<div class="clear"></div>
The problem is in the usage of next().
From documentation - Get the immediately following sibling of each element in the set of matched elements.
And as in your case, img are not siblings, hence, there are no matched set of elements.
If your hierarchy is strict and is not going to change, then you can do something like following
/* Find image - go its parent - go to next anchor - get the image - get the source */
$(".image-container").find("img[src='" + Img + "']").parent().next('a').find("img").attr('src');
Else you can iterate over the images.
For reference - http://plnkr.co/edit/onUeWl8mPqVhtaHf37xp?p=preview
Please try this:
$('#id').next().find('img').attr("src");
I am having trouble creating a jQuery function that is called by an HTML onclick event handler that finds the ID of that particular element, adds a "#" to the start of it and "-container" to the end and assigns it to a variable. This variable is then used to scroll the window to that particular div. My HTML is as follows and the jQuery function is below it.
<div class="skill-grid">
<div id="science" onclick="ScrollToDiv()">
<div class="skill-text">science</div>
</div>
<div id="coding" onclick="ScrollToDiv()">
<div class="skill-text">coding</div>
</div>
<div id="photography" onclick="ScrollToDiv()">
<div class="skill-text">photography</div>
</div>
</div>
<div id="science-container"></div>
<div id="coding-container"></div>
<div id="photography-container"></div>
The function in jQuery I have written is as follows:
<script type='text/javascript'>
function ScrollToDiv() {
var container = "#" + $(this).attr('id') + "-container";
$('html, body').animate({
scrollTop: $(container).offset().top }, 2000);
}
</script>
I do feel like I am missing something very simple. Any help would be much appreciated! I am also open to a new/better way to do this!
My thanks for your time,
Finn
update this:
onclick="ScrollToDiv(this)"
// in the above parameter you have to pass the current object's context.
pass the current context in your method. and update the function as:
function ScrollToDiv(el) { // <---get the current object from the param here
var container = "#" + $(el).attr('id') + "-container";
//----^^^^^ wrap it as jQuery object
$('html, body').animate({
scrollTop: $(container).offset().top
}, 2000);
}
Try to be unobtrusive as much as possible:
As you are using jQuery do this:
put your original function in global scope:
function ScrollToDiv() {
var container = "#" + $(this).attr('id') + "-container";
$('html, body').animate({
scrollTop: $(container).offset().top
}, 2000);
}
and add this script:
jQuery(function($){
$('.skill-grid > div').click(ScrollToDiv);
});
Or if you can change your ids to class like this:
<div class="skill-grid">
<div id="science">
<div class="skill-text">science</div>
</div>
<div id="coding">
<div class="skill-text">coding</div>
</div>
<div id="photography">
<div class="skill-text">photography</div>
</div>
</div>
<div class="science"></div>
<div class="coding"></div>
<div class="photography"></div>
then you can do this:
function ScrollToDiv() {
var container = "." + this.id;
$('html, body').animate({
scrollTop: $(container).offset().top
}, 2000);
}
jQuery(function($){
$('.skill-grid > div').click(ScrollToDiv);
});
re-think your html struct if you can:
<div class="skill-grid">
<div id="science">
<div class="skill-text"><a class="click" href="#science-container">science</a></div>
</div>
<div id="coding">
<div class="skill-text"><a class="click" href="#coding-container">coding</a></div>
</div>
<div id="photography">
<div class="skill-text"><a class="click" href="#photography-container">photography</a></div>
</div>
</div>
<div id="science-container"></div>
<div id="coding-container"></div>
<div id="photography-container"></div>
<script>
$(function(){
$('a.click').on('click', function(e){
var offset = $(this.hash).offset().top;
$('html, body').animate({
scrollTop: offset
}, 2000
);
return false;
});
});
</script>
How can I shorten this code? Each css selector increases +1. All Bio's divs are hidden unless the .mug(x) is selected.
Thanks
<script type='text/javascript'>
$(document).ready(function () {
$(".mug1").click(function() {
$("#bios div").hide();
$(".bio1").show();
});
$(".mug2").click(function() {
$("#bios div").hide();
$(".bio2").show();
});
$(".mug3").click(function() {
$("#bios div").hide();
$(".bio3").show();
});
});
</script>
<h2>Meet the team</h2>
<div id="mugshots">
<img src="images/img-mugshot.jpg" alt="mug" class="mug1"/>
<img src="images/img-mugshot.jpg" alt="mug" class="mug2"/>
<img src="images/img-mugshot.jpg" alt="mug" class="mug3"/>
</div>
<div id="bios">
<div class="bio1"></div>
<div class="bio2"></div>
<div class="bio3"></div>
</div>
Something along these lines?
Change the html to this:
<div id="bios">
<div class="bio" data-id="1"></div>
<div class="bio" data-id="2"></div>
<div class="bio" data-id="3"></div>
</div>
Then your js to this:
$(".mug").click(function() {
$("#bios div").hide();
$(".bio[data-id='" + $(this).data("id") + "'", $("#bios")).show();
});
This way you could add as many mugs and bios as you like without having to add any more js.
Simplest way is a for loop
$(document).ready(function () {
for (var i = 1; i <= 3; i++) {
$(".mug" + i).click(function() {
$("#bios div").hide();
$(".bio" + i).show();
});
}
});
There may be a better way still that I'm not thinking of.
just use index and add as many as you want:
$('#mugshots>img').on('click', function() {
$("#bios div").hide();
var myIndex = $(this).index("#mugshots> img");
$("#bios> div").eq(myIndex).show();
});
a shorter version of this is:
$('#mugshots>img').on('click', function() {
$("#bios div").hide().eq($(this).index("#mugshots> img")).show();;
});
Use the .eq() and the index of your mugshots, assuming the first mugshot goes with the first bio, second mugshot with second bio, and so on.
http://api.jquery.com/eq/
Also, use a class to keep track of your active bio rather than calling hide on all bios for each update.
JS:
$(document).ready(function() {
$('#mugshots img').click(function() {
$('#bios .active').hide().removeClass('active');
$('#bios div').eq($(this).index()).show().addClass('active');
});
});
HTML:
<h2>Meet the team</h2>
<div id="mugshots">
<img src="images/img-mugshot.jpg" alt="mug"/>
<img src="images/img-mugshot.jpg" alt="mug"/>
<img src="images/img-mugshot.jpg" alt="mug"/>
</div>
<div id="bios">
<div></div>
<div></div>
<div></div>
</div>
try this:
$(document).ready(function () {
$("img[alt=mug]").each(function() {
$(this).click(function(){
var id = $(this).attr("class").substr(3, 1);
$("#bios div").hide();
$(".bio" + id).show();
});
});
});
HI
In my project I have a Popup image .
When the user clicks on the left part of the image it will redirect the user
to page1.aspx. When the user clicks on the right part of the image
it will redirect the user to page2.aspx. I used JQuery for this and it works
fine in Fire fox. But it doesn't work in IE.
What could be the reason,. Any help will be appreciated.
Thanks
Here is the code
<script type="text/javascript">
swfobject.registerObject("inhalerVideo", "9.0.0", "expressInstall.swf");
/* jQuery Nonsense */
$(document).ready(function()
{
//!\: Slider nav thingy.
$("#link_one").click(function()
{
var aWidth = $(this).width();
if($(this).hasClass("closed"))
{
$(this).removeClass("closed").addClass("open").animate({width: aWidth + 205 + "px"}, {queue: false, duration: "fast"});
if($("#link_two").hasClass("open"))
{
var bWidth = $("#link_two").width();
$("#link_two").removeClass("open").addClass("closed").animate({width: bWidth - 205 + "px"}, {queue: false, duration: "fast"});
$("#link_two a").hide();
}
$("a", this).show();
}
else
{
$("a", this).hide();
$(this).addClass("closed").removeClass("open").animate({width: aWidth - 205 + "px"}, {queue: false, duration: "fast"});
}
});
$("#link_two").click(function()
{
var aWidth = $(this).width();
if($(this).hasClass("closed"))
{
$(this).removeClass("closed").addClass("open").animate({width: aWidth + 205 + "px"}, {queue: false, duration: "fast"});
if($("#link_one").hasClass("open"))
{
var bWidth = $("#link_one").width();
$("#link_one").removeClass("open").addClass("closed").animate({width: bWidth - 205 + "px"}, {queue: false, duration: "fast"});
$("#link_one a").hide();
}
$("a", this).show();
}
else
{
$("a", this).hide();
$(this).addClass("closed").removeClass("open").animate({width: aWidth - 205 + "px"}, {queue: false, duration: "fast"});
}
});
//!\: This could all be achieved with CSS.
$(".subnavonfirst").prev(".navoff").css("background-image", "url('images/nav_on_bg.gif')").children("a").css("color", "#fff");
$(".subnavon").prev(".subnavofffirst").prev(".navoff").css("background-image", "url('images/nav_on_bg.gif')").children("a").css("color", "#fff");
$(".subnavonlast").prev(".subnavoff").prev(".subnavofffirst").prev(".navoff").css("background-image", "url('images/nav_on_bg.gif')").children("a").css("color", "#fff");
$(".subnavonlast").prev(".subnavofffirst").prev(".navoff").css("background-image", "url('images/nav_on_bg.gif')").children("a").css("color", "#fff");
});
</script>
<!-- Main Content Container -->
<div id="mainContentContainer">
<!-- Top Link Slider -->
<div id="headerContainer" class="printHide">
<div id="headerLinkContainer">
<div id="banner_container">
<div id="link_one" class="sub closed">
<img class="major" src="images/patient_info.gif" border="0" />
<img class="minor" src="images/sub_nav.gif" border="0" />
<!-- -->
<!-- -->
</div>
<div id="link_two" class="sub closed">
<img class="major" src="images/prescribe_info.gif" border="0" />
<img class="minor" src="images/sub_nav.gif" border="0" />
<!-- -->
<!-- -->
</div>
<div id="link_three" class="open"><img src="images/isi.gif" border="0" /></div>
</div>
</div>
</div>
Have you tried using an imagemap? That way it's supported by almost all browsers, including IE.
You can also capture the click() event of the <area> tag if you wish.
EDIT: Upon looking at your site, perhaps you could bind the expanding div functionality to the image .major rather than to the .sub div.
It looks like the .sub div is intercepting the click event on IE, but standards-compliant browsers understand that the .minor picture should be rendered 'above' the .sub div.