Search the Community

Hi there, I’m a newbie in coding HTML, CSS (very poor in JS) and I would like to make a responsive navbar like that: https://www.w3schools.com/howto/howto_js_topnav_responsive.asp (here the code: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_topnav). My question is, when the navbar is in “responsive mode” and when clicking the menu button (right side in the example), is it possible to produce a "fade in/out" effects in order to display the menu items? Thank you in advance for your time and for any help you can provide. Sergio

Hi everybody. First at all, I specify I'm French and I'm sorry if my English isn't perfect. I've chosen this forum because I didn't find a solution with many French forums. A friend has advised to me this forum to expose my problem. I would like to add an animation to my html page by using JS. Let me explain ; for the time being, there's only one picture <img> on my page, it's a candle image. I would like to add an animation by using JS (or something else it doesn't matter) giving the impression of being near to the flame, if you know what I mean. I don't want to see the flame's move or to modify the picture, but just a light effect by using luminosity. I'm not a very high level in JS, and I don't know if I should use randomly variables and change luminosity or something else. If you could show me an example I would be grateful (: Thanks in advance, -Flo

Guys, good morning. I am looking for a long time this helps, I found this forum and hope I succeed in this quest is the following, http://studioplanoverde.com.br/site/ this link, or by clicking the PORTFOLIO menu, it goes to down in the page itself and show some pictures, and when you click on top of the image, it opens, it opens only remaining on the page itself, what I need and MUCH, is that when you open the image, it may rise slightly, why is paying attention, the image opens but gets half of the page, then you have to go down a little scroll rod. I finally found the file for this purpose, at first, seems a bit messy, but that's the way it is in the file, I'll post here. Since now, and very grateful for the attention and mostly anyone who can help me. /* Dynamic Window Ajax Portfolio Content */"use strict";(function($) {var $actual= null;var obert=false;$(".ch-grid").click(function() {obre($(this).attr('id'));$actual=$(this);});$(".folio-btn").click(function() {$(".project-window").slideUp("slow");obert=false;});//obre('portfolio-1.html',1);function obre(quin, dummy){$.ajax({url: quin,success: function(data) {$('.project-content').html(data);$(".project-content").hide(0)$('.project-window').hide(0)tanca();canvia();worksCarousel();if(dummy!=1){// if(obert!=true){$("html, body").animate({ scrollTop: $('#portfolio').offset().top }, 500, function(){$('.project-window').show(0);$('.project-window').animate({height:900}, 500,function(){$('.project-window').css('height','auto');// $(".project-window").slideDown(1500, function() {$(".project-content").fadeIn("slow");});});/* }else{$("html, body").animate({ scrollTop: $('#anchor5').offset().top }, 300, function(){$('.project-window').show(0);$(".project-content").fadeIn("slow");});}obert=true; */}}});}function tanca(){$(".close").click(function() {$('#portfolio').slideUp("slow");$('#portfolio').animate({ scrollTop: $('#portfolio').offset().top });obert=false;});}function seguent(){if($actual.next().hasClass('final')){$actual=$($('.inici').next());}else{$actual=$($actual.next());}if($actual.hasClass('isotope-hidden')){seguent();}else{obre($actual.attr('id'));}}function enrera(){if($actual.prev().hasClass('inici')){$actual=$($('.final').prev());}else{$actual=$($actual.prev());}if($actual.hasClass('isotope-hidden')){enrera();}else{obre($actual.attr('id'));}}function canvia(){$('.btn-next').click(function() {seguent();$("html, body").animate({ scrollTop: $('#project-show').offset().top }, 1000);});$('.btn-prev').click(function() {enrera();$("html, body").animate({ scrollTop: $('#project-show').offset().top }, 1000);});}// Carousel Project Openedfunction worksCarousel(){var totalWorks = $(".wrapper-project ul li").length;var ampleWork = $(".project-content").width();var ampleTotalWorks = totalWorks*ampleWork;$('.wrapper-project ul').css('width',ampleTotalWorks)$("html, body").animate({ scrollTop: $('#project-show').offset().top }, 1);var fragment = document.createDocumentFragment(),li = document.createElement('li');while (totalWorks--) {fragment.appendChild(li.cloneNode(true));}$('.controller-3 ul').append(fragment);var index3 = 0;var pos3 = 10;$('.controller-3 ul li:first-child').addClass('selected');$(".controller-3 ul li").click(function(){index3 = $(this).index();$(".wrapper-project").stop().animate({scrollLeft:ampleWork*index3},'slow');$('.controller-3 ul li').removeClass('selected');$(this).addClass('selected');//alert(ampleitem);});$(".w-next").click(function(){if( index3 != $(".controller-3 ul li").size()-1){ index3++; $(".wrapper-project").stop().animate({scrollLeft:ampleWork*index3},'slow'); pos3++; $('.controller-3 ul li.selected').removeClass('selected').next().addClass('selected');} });$(".w-prev").click(function(){ if( index3!=0 ){ index3--; $(".wrapper-project").animate({scrollLeft:ampleWork*index3},'slow'); pos3--; $('.controller-3 ul li.selected').removeClass('selected').prev().addClass('selected'); }});}})(jQuery);

<!DOCTYPE html><html><head><body><div id="slideshow"><img width="512px" height="384px" src="1.gif" usemap="#slideshowMap"><img width="512" height="384" src="2.gif"><img width="512" height="384" src="3.gif"><map name="slideshowMap"><area shape="rect" coords="0, 0, 63, 47"><area shape="rect" coords="64, 48, 127, 95"><area shape="rect" coords="128, 96, 191, 143"><area shape="rect" coords="192, 144, 255, 191"><area shape="rect" coords="256, 192, 319, 239"><area shape="rect" coords="320, 240, 383, 287"><area shape="rect" coords="384, 288, 447, 335"><area shape="rect" coords="448, 336, 511, 383"></map></div></body></html> At pictures the "display none" attribute (I tried also "visibility hidden") is set. It is necessary that in turn there were all "area". I tried to specify them "display block" or "visibility visible", but they aren't displayed. How to make that it was possible to display the image on slices?