I have a fullscreen slider in background and a text logo on it for my wordpress homepage.
I would like to hide and show this slider by clicking on my text logo.
The function I use works actually great but I have to click twice on the text logo to make it run.
<div id="conteneur">
<div id="fullscreen-slider" class="royalSlider rsDefault">
<img src="<?php bloginfo('stylesheet_directory'); ?>/images/perron_01.jpg" />
<img src="<?php bloginfo('stylesheet_directory'); ?>/images/perron_01.jpg" />
</div>
<header>
<div id="logo">
Adequat
</div>
And the script :
<script type="text/javascript">
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}</script>
I think the browser search for the href="#", and only once he finds it, my script goes well.
Thank you for your help and I am sorry but I am a beginner and my website is not yet online.
Adrien Quélet
If you are using jQuery (which I recommend) Here is a jsFiddle example.
The script is very much simpler to use/maintain.
JQUERY
$('#logo').click(function(event) {
$('#logo a').toggle();
event.preventDefault();
});
You would need to modify your css and such to fit your needs, but this should get you going.
Do it the other way around:
<script type="text/javascript">
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'none')
e.style.display = 'block';
else
e.style.display = 'none';
}
</script>
Related
I want to change the colour of an html element when it is clicked. I don't want the text itself to change, just the colour. The colour should toggle back and forth with subsequent clicks. Thank you for any help.
Here you have working example:
let flag = true
function toggleColor() {
const exampleStyle = document.getElementById("example").style
flag ? exampleStyle.color = "red" : exampleStyle.color = "blue"
flag = !flag
}
<div id="example" onclick="toggleColor()">your text</div>
if you want to toggle color of font then use:
var h1=document.querySelector("h1");
var iscolor=true;
h1.addEventListener("click",function(){
if (iscolor){
h1.style.color="yellow";
iscolor=false;}
else{h1.style.color="black";
iscolor=true;
}
});
I think in the simple scenario your solution should look similar to this
var element = document.querySelector('your-element-selector');
element.addEventListener('click', function(e) {
element.style.backgroundColor = 'wanted color';
});
Simply use javascript:
<span id="demo" onclick="clicked()">your text</span>
<script type="text/javascript">
function clicked() {
document.getElementById("demo").style.color = "red";
}
</script>
Ok, so I'm currently using the code below, to hide and show a div.
The div contains a video which is embedded direct from an MP4 link, the problem i'm having is when I hide the div, the video continues to play in the background, how do I stop this..
<script type="text/javascript">
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
</script>
Find the video tag inside the element you want to hide and pause it. If you do not have more than one video this should work (assuming you are using HTML5 video of course):
<script type="text/javascript">
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block') {
var video = e.getElementsByTagName("video")[0];
video.pause();
e.style.display = 'none';
} else {
e.style.display = 'block';
}
}
</script>
I want to disable my image when I click the toggle button. I think I made the code right but it doesn't work fine. When the toggle is set to true then I click the image it should alert 'test' and when the toggle is set to false then the image is disabled so no alert will show.
But my problem is either true or false when I click the button it's alert test. What is wrong?
var app = angular.module('main', []).
controller('DemoCtrl', function($scope, $filter) {
$scope.isEnabled=true;
$scope.test = function() {
alert('test');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="main" ng-controller="DemoCtrl">
<h1>Image disable</h1>
<img src="http://s7.postimg.org/w7w78jgjf/check_box_1.png" alt="Add" height="25" width="25" ng-disabled="!isEnabled" ng-click="test()"></img>
<br/>
<button title="Toggle" ng-click="isEnabled = !isEnabled">toggle</button>
{{isEnabled}}
</body>
ng-click will be triggered even there is a ng-disabled for img elements.
A simple solution is to change your ng-click to check the parameter
<img src="http://s7.postimg.org/w7w78jgjf/check_box_1.png" alt="Add" height="25" width="25" ng-disabled="!isEnabled" ng-click="!isEnabled || test()"></img>
Do this in controller.You don't have add anything new in your Html
var app = angular.module('main', []).
controller('DemoCtrl', function($scope, $filter) {
$scope.isEnabled=true;
$scope.test = function() {
if(!$scope.isEnabled) return;
alert('test');
}
});
I am having HTML page where i ll have link as "SHOW" while clicking on that I need to show div area. where DIV has iframe.
Normally while loading HTML page that div should be in hidden state while clicking only it should be shown.
I need close button inside that link..While clicking on that I need to close the dive that is hide.
a
function toggleDisplay(id)
{
if (!document.getElementById) { return; }
var el = document.getElementById('straddle');
if (el.style.display == ''){
el.style.display = 'none';
}else {
el.style.display = '';
}
}
I don't want this toggle function
Please help me.
Your javascript
<script type="text/javascript">
<!--
var whatever = document.getElementById('mydiv');
whatever.style.display = 'none';
function show(){
whatever.style.display = 'block';
}
function hide(){
whatever.style.display = 'none';
}
//-->
</script>
and then the HTML
Click here to show element
<br/>
<div id="mydiv">
This will disappear and reappear and
Click here remove element</div>`
You may want this (Iframe may take a while to load, so let it load)
HTML:
Show
<div id="straddle">
<div id="close">Close</div>
<iframe width='100%' src="http://heera.it"></iframe>
</div>
JS: (Put it before closong </body> tag between <scripe type="text/javascript"></scripe>)
window.onload = function() {
var show = document.getElementById('show'),
el = document.getElementById('straddle'),
close = document.getElementById('close');
show.onclick = function() {
el.style.display = 'block';
return false;
};
close.onclick = function(){
el.style.display = 'none';
};
};
Update : Added relevant css
#straddle{ display:none; }
#close{
float:right;
cursor:pointer;
display:inline-block;
}
Use jQuery:
$(document).ready(function() {
$('#link1').click(function() { $('#div').css({ display:'none' }) })
$('#link2').click(function() { $('#div').css({ display:'block' }) })
})
I've got a jQuery code, which
$("a.reply").click(function() {
//code
});
When I click the link with .reply class the first time, nothing happens. The second time I click, the code inside the click function works.
The link is being inserted on the page using PHP from a mysql database. so it's not being inserted dynamically.
Why is this happening? Any solution?
The BadASS Code:
$(function(){
//TextArea Max Width
var textmaxwidth = $('#wrapper').css('width');
//Initialize Focus ids To Different Initially
var oldcommentid = -1;
var newcommentid = -2;
//End Of initialization
$("a.reply").click(function() {
newcommentid = $(this).attr('id');
if (newcommentid == oldcommentid)
{
oldcommentid=newcommentid;
$("#comment_body").focus();
}
else
{
$('#comment_form').fadeOut(0, function(){$(this).remove()});
var commetformcode = $('<form id="comment_form" action="post_comment.php" method="post"><textarea name="comment_body" id="comment_body" class="added_comment_body" rows="2"></textarea> <input type="hidden" name="parent_id" id="parent_id" value="0"/> <div id="submit_button"> <input type="submit" value="Share"/><input type="button" id="cancelbutton" value="Cancel"/></div></form>');
commetformcode.hide().insertAfter($(this)).fadeIn(300);
//
var id = $(this).attr("id");
$("#parent_id").attr("value", id);
oldcommentid=newcommentid;
//dynamicformcreation function
dynarun();
//
}
return false;
});
dynarun();
function dynarun()
{
//Form Re-Run Functions
$('#comment_body').elastic();
texthover();
$("#comment_form input, select, button").uniform();
textareasizer();
$("#comment_body").focus();
$("abbr.timestamp").timeago();
return false;
}
//TextArea Resizer Function
function textareasizer(){$("#comment_body").css('max-width', textmaxwidth);return false;}
//Other Miscellaneous Functions
$('.comment-holder').hover(
function(event) {
$(this).addClass('highlight');
},
function(event) {
$('.comment-holder').removeClass('highlight');
}
);
function texthover()
{
$('.added_comment_body').hover(
function(event) {
$(this).parent().parent().addClass('highlight');
},
function(event) {
$('.comment-holder').removeClass('highlight');
}
);
return false;
}
});
This is a longshot, but are you running some sort of tracking script? Like webtrends or coremetrics (or even some of your own script, that's globally looking for all clicks)? I ran into a similar problem a while ago, where the initial-click was being captured by coremetrics. Just a thought.
Does it still happen if you comment out all your code and simply have an alert("hi") inside the click function?
Update
I think Sarfaz has the right idea, but I would use the document ready function like so
$(document).ready(function(){
$("a.reply").click(function() {
//code
});
});
I just ran into same problem and I resolved my problem by removing:
<script src="bootstrap.js"></script>
you can use bootstrap.min.js
Use Inline CSS for hiding div and use JS/jQuery to show . This way Jquery Click Event will Fire On First Click
<div class="about-block">
<div class="title">About us</div>
<div class="" id="content-text" style="display:none;">
<p>Show me.</p>
</div>
</div>
<script>
var x = document.getElementById("content-text");
jQuery( '.about-block' ).click(function() {
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
});
</script>