I'm trying to use toggle with jQuery and it's working but just once. If I click on the div again the toggle doesn't work, and I have to refresh de page. And if I try on JSFiddle it works fine, I can´t see my mistake.
$("#search_icon").click(function() {
$("#search").fadeToggle("slow", "linear");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="images/magnifying-glass32.png" height="30px" class="social_icons" id="search_icon" />
<div id="pesquisa">
<input type="text" placeholder="Pesquisar..." id="search" border="0" />
</div>
Related
i have this code for floating banner on the bottom side by side left and right , nothing is happend when i clicked the left banner , but when i click the right banner, the banner on the left side was automatically closed , and when i click the right banner again it will direct you to other website BUT the banner will disappear.
And my question is :
how to make left and right work properly ,left banner can be click and direct to target website and when i click right banner does not close the left banner
after banner clicked banner doesnt automatically closed
This is the code i have on my site :
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#bottomads").click(function(){
$(this).hide();
});
});
</script>
<script>
$(document).ready(function(){
$("#bottomads2").click(function(){
$(this).hide();
});
});
</script>
<div style='width:100%;margin:auto;text-align:center;display:scroll;position:fixed;bottom:5px;right: 270px;z-index:999;-webkit-transform:translateZ(0);' id="bottomads">
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_120x44dp.png" height="60px" width="468px" />
<img src="https://drive.google.com/uc?export=download&id=0B_YE_mOyP6psSG5qQk9yRG5hcWs" style="margin-left: -520px;margin-top: 45px;position: absolute;middle: 20px;top: 0;" border="0">
</div>
<div style='width:100%;margin:auto;text-align:center;display:scroll;position:fixed;bottom:5px;left: 270px;z-index:999;-webkit-transform:translateZ(0);' id="bottomads2">
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_120x44dp.png" height="60px" width="468px" />
<img src="https://drive.google.com/uc?export=download&id=0B_YE_mOyP6psSG5qQk9yRG5hcWs" style="margin-right: 25px;margin-top: 45px;position: absolute;middle: 20px;top: 0;" border="0">
</div>
I hope i can explain well , and thank you for all the answer.
Your problemis shown in this image. bottomads2's div is on bottomads.
The solution to this problem is :
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#bottomads").click(function() {
$(this).hide();
$("#bottomads").style('width', '100%');
});
$("#bottomads2").click(function() {
$(this).hide();
});
});
</script>
<div style='width:100%;margin:auto;text-align:center;display:scroll;position:fixed;bottom:5px;right: 270px;z-index:999;-webkit-transform:translateZ(0);' id="bottomads">
<a target="_blank" rel="nofollow"><img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_120x44dp.png" height="60px" width="468px" /></a>
<img src="https://drive.google.com/uc?export=download&id=0B_YE_mOyP6psSG5qQk9yRG5hcWs" style="margin-left: -520px;margin-top: 45px;position: absolute;middle: 20px;top: 0;" border="0">
</div>
<div style='text-align:center;display:scroll;position:fixed;bottom:5px;left: 700px;z-index:999;-webkit-transform:translateZ(0);' id="bottomads2">
<a target="_blank" rel="nofollow"><img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_120x44dp.png" height="60px" width="468px" /></a>
<img src="https://drive.google.com/uc?export=download&id=0B_YE_mOyP6psSG5qQk9yRG5hcWs" style="margin-right: 25px;margin-top: 45px;position: fixed;middle: 20px;top: 0;" border="0">
</div>
Also try to code clean. you will found a lot of blogs out there regarding how to write clean code. i.e try to make classes for same type of styling :
.bottomads{
text-align:center;
display:scroll;
position:fixed;
bottom:5px;
z-index:999;
-webkit-transform:translateZ(0);
}
Then the line will be like this :
<div style='width:100%;margin:auto;right: 270px;' id="bottomads" class="bottomads">
Your bottomads2 has overlayed on bottomads
Same reason as above
Suggest you to do more test in https://jsfiddle.net before asking your next question.
I have made a search bar that I want to show when user will click on search image that is list item as
<li class="item" onclick="showSearch()"><img id="search" src="images/search.png" ></li>
I set the visibility to hidden in HTML as
<div id="bar_search" style="visibility:hidden;">
have a function as
function showSearch () {
document.getElementById("bar_search").style.visibility = "visible";
}
but when i click on list item it does not show however hidden property working fine.
where I'm making mistake please tell me, thanks
Update:
content in the div
<div id="bar_search" style="visibility:hidden;">
<img id="searchbar" src="images/searchBar.png">
<div id="searchDec">
<input type="text">
<button ><b>Search</b></button>
</div>
</div>
Try setting the property through your style sheet and see if you can't get it to change with the event-handler.
<node class="hidden" onclick=toggleVisibilty()"></node>
Or if your not opposed to using jQuery, then you could always use the toggle method, so as to toggle the class that way.
http://api.jquery.com/toggle/
your code is fine maybe you have syntax error in the same page
function showSearch() {
document.getElementById("bar_search").style.visibility = "visible";
}
<li class="item" onclick="showSearch()">
<img id="search" src="https://wiki.ubuntu.com/IconsPage?action=AttachFile&do=get&target=search.png">
</li>
<div id="bar_search" style="visibility: hidden;">
<img id="search" src="http://i.stack.imgur.com/X6BXa.png">
</div>
I use pageslide.js and I have this html code
EDIT:
<body>
Click me!
<div id="modal">
<div id="search">
<img class="icon-search" src="imgs/search.png" onClick= "parse_search();" style="cursor:pointer;">
<input id="query" name="q" type="text" size="40" placeholder="Search..." />
</div>
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/jquery.pageslide.min.js"></script>
<script >
function parse_search(){
alert(document.getElementById("query").value)}
/* Slide to the left, and make it model (you'll have to call $.pageslide.close() to close) */
jQuery(".second").pageslide({ direction: "right", modal: true });
</script>
</body>
Then the alert window doesn't give me the value of the input field. It gives nothing for value like that ""
Where is the problem?
This is a good example why inline script makes troubles.
Try this:
jQuery(document).ready(function(){
jQuery('img.icon-search').click(function(){
var inputValue = jQuery(this).parent().find('input').val();
alert(inputValue);
});
and remove the inline script from your img element. Use just:
<img class="icon-search" src="imgs/search.png" style="cursor:pointer;">
Fiddle
I'm trying to follow this guide. I reach a problem when i try to change the HTML file when the user clicks a button.
This is my script:
<script>
window.$ = window.jQuery = WLJQ;
$("#btnPromo").click(function(){
$("#pagePort").load("pages/MainPage.html", function(){
alert("loaded!");
});
});
</script>
And this is my core HTML file (auto generated by Worklight):
<body onload="WL.Client.init({})" id="content" style="display: none;">
<!--application UI goes here-->
<div data-role="page" id="pagePort">
<div id="header" align="center">
<img src="images/logo.png">
</div>
<div data-role="content">
<div>
<input type="image" name="btnPromo" src="images/btnHotPromo.png" width="75%"/>
</div>
<div>
<input type="image" name="btnMall" src="images/btnMall.png" width="75%"/>
</div>
<div>
<input type="image" name="btnOutlet" src="images/btnOutlet.png" width="75%"/>
</div>
<div>
<input type="image" name="btnAbout" src="images/btnAbout.png" width="75%"/>
</div>
</div>
</div>
My goal is to change the #pagePort to MainPage.html every time the user clicks on #btnPromo.
The answer is i forgot to add the $(function(){}); at the start of the code, so the code should be :
$(function(){
$("#btnPromo").click(function(){
$("#pagePort").load("pages/MainPage.html", function(){
alert("loaded!");
});
});
});
And everything will be OK :D
This code works fine in IE8/7 and Firefox... But in Google Chrome i got a problem...
My page have a menu, when the user click it, hide div blocos and shows the content (using url parameter setted in menu)
My Jquery Code:
$(document).ready(function() {
$('div.blocos').hide();
$('div#divMenuBloco').show();
$('.clickable').click(function(){
var _session = $(this).attr('url');
$('div.blocos').hide();
$('div#' + _session).fadeIn('slow');
return false;
});
}
MENU div item:
...
That part works Great... All menu links hide and fadeIn the content...
So I added a Link "Back" inside content div...
<div class="clickable" id="divBack" style="float:right;margin-right:25px;cursor:pointer" url="divMenuBloco">Back</div>
When user click on that, the "Start" content shows up, but it hides after ... Only in Google Chrome ...IE8 and Firefox 3.5 works fine...
Any idea?
Edited:
Html code:
<div class="moldura">
<div class="logo">
</div>
<div class="menu">
<div class="navegacao-principal">
<div class="clickable" url="div1">
<img src="Arquivos/Imagens/Estrutura/iconeLocalizacao.png"" />
</div>
<div class="clickable" url="div2">
<img src="Arquivos/Imagens/Estrutura/iconePadrinhos.png" />
</div>
</div>
<div id="divMenuBloco" class="blocos">
<strong>HOME</strong><br />
<div class="bloco clickable" url="div3">
<strong>LINK 3</strong><br />
</div>
</div>
<div id="div1" class="blocos">
"TESTE 1"
<div class="clickable" id="divBack" style="float: right; margin-right: 25px; cursor: pointer" url="divMenuBloco"> Back</div>
....
</div>
</div>
I used "Show" instedOf "Fadein" and worked fine in Chrome !