its an i tag
(the image is)
which uses css to display the icons
through a cdn hosted stylesheet and how would I incorporate that.
So lets say there is a magnifying glass icon on the web page, we the user clicks on the icon , a div dropdown search box appears. that is what i am asking help for.
not sure how to do it but I know I am close.
The icon is the
<section class="search">
<div id="searchbar"><i class="search-bar"></i></div>
<div class="search-dropdown hidden">
<div class="searchbox">
<input placeholder="search..." type="text"/>
</div>
</div>
</section>
//// javascript////
$(document).ready(function(){
$('#searchbar').click(function(){
$(this).siblings('.search-dropdown').toggleClass('hidden');
});
});
Don't know what your goal is, but your code seems to work.
Have you checked so your div wraps around the image so when you click it you click inside the div (try to do as I in the fiddle, a border around the div so you can see).
else it should work just fine.
What is the css for the .hidden class?
<style>
.hidden
{
background-color: yellow;
}
#searchbar
{
border: 1px solid black;
height: 16px;
width: 50px;
}
</style>
<section class="search">
<div id="searchbar"><i class="search-bar">CLICK</i></div>
<div class="search-dropdown hidden">
<div class="searchbox">
<input placeholder="search..." type="text"/>
</div>
</div>
</section>
Script:
$(document).ready(function(){
$('#searchbar').click(function(){
$(this).siblings('.search-dropdown').toggleClass('hidden');
});
});
Check this jsfiddle out!
Related
I want the screen to scroll down to the div. This div has an ID of 'weather-data'
I have tried the following;
document.getElementById('weather-data').scrollIntoView();
I have also tried using anchor tags this did not seem to work
The button which the user will click:
<button id="submit" onclick="myFunction()">
Submit
</button>
The function that runs when the button is clicked:
function myFunction(){
cityName();
getData();
clear();
document.getElementById('weather-data').scrollIntoView();
}
This is the div I want the screen to scroll to:
<div id="weather-data">
</div>
use the anchor tag to link the the div
body{
margin: 0;
}
div{
height: 100vh;
border: 1px solid black;
}
<html>
<body>
<div id='a'>a</div>
<div id='b'>b</div>
<div id='c'>c</div>
<div id='d'>d</div>
<div id='e'>e</div>
<button><a href='#c'>go to c</a></button>
</body>
</html>
I fixed the issue I had to write an if statement to check if there was any text in the h1 element.
if(weatherMain != null){
document.getElementById('icon').scrollIntoView();
document.getElementById('weather-main').scrollIntoView();
}
Can anyone help me ?
I need to create pop-up to specific in line.
if the user was reading the article and have already reached the mid articles then a pop up will appear, and if returning to the top of the popup will be hide.
This is my source code pop up
$(".news").css("width","100%");
$(document).ready(function(){
if($("#blanket").length==1){
if($("#popUpDiv2").length==1){
popup('popUpDiv2');
}
else{
popup('popUpDiv');
}
}
checkCookie('popUpDiv');
$('#popUpDiv').removeAttr('style');
$('#popUpDiv').css({left: 20, bottom: 25});
});
#blanket {width: 10px;background-color:#fff;opacity:0;position:fixed;z-index:9001;top:0px;left:0px;/*width:100%;*/}
#popUpDiv {position:fixed;background:url('../image/Pop-Up-Banner-NOS-6000-Vermillion.png') no-repeat;width:275px;height:275px;z-index:9002;background-size: 275px auto;}
.trbox{width:270px;height:270px;bottom: 0px;left: 0px;}
#popUpDiv a,#popUpDiv2 a {width:45px;height:10px;padding: 2px 35px;position:relative;bottom: 29px;left:103px;}/*fix jangan diutak atik*/
.closepopup2{position: absolute;cursor: pointer;font-weight: bold;color: #fff;width:20px;height:2px;padding: 5px 10px;float:right;bottom: 232px;right:1px;} /*fix jangan diutak atik*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
div id="popup"></div>
<div id="blanket" style="display:none;"></div>
<div id="popUpDiv" style="display:none;"><div class="trbox"> </div>
<a target="_blank" href=""></a>
<div onclick="popup('popUpDiv')" class="closepopup2"></div>
<!-- <div class="popUpbottom">
<div class="comboAlert"><input type="checkbox" name="checkboxAlert" id="checkboxAlert"> Don't show again Today</div>
</div> -->
</div>
For the line which you want to use as trigger for the popup, you have to do the following.
Suppose it is a div. Calculate the scollTop of the div on scoll event. and when the scollbar position becomes equal to the scrollTop of the div, then show the popup.
See below links,
How to get scrollbar position with Javascript?
http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_prop_element_offsettop
In my page, whenever a user clicks on a specified div, the wysiwyg editor is initialized with that div. And that works fine. But, the problem is that the cursor keeps positioning at the beginning of the line. Even if I select word, the cursor positions itself to the beginning of the line which then unselects the selected word. How do I make sure the cursor is at the position where the user wants or clicks?
Sample in codepen.io.
<div id="toolbar_wrapper">
<div id="toolbar">
</div>
</div>
<div id="content">
<div class="redactor">
<h1>Header</h1>
<p>Paragraph</p>
</div>
<div class="redactor">
<h1>Another Header</h1>
<p>Another Paragraph</p>
</div>
</div>
This is an issue with the logic in the JavaScript code. Right now this is what the JS does when you click on one of the .redactor divs:
Destroy the redactor editor for the .selected classes.
Add the class .selected to the clicked box.
Initialize the redactor editor for the clicked box.
That works great if you click on a box different to the one already selected, but if you click on the selected box, you are destroying the redactor editor, and then initializing again. And this is what causes the cursor caret to go to the beginning with each click.
One quick solution would be to wrap the whole function in a condition, so it is only applied if the div clicked is not the selected one already:
If this box is not already .selected:
Destroy the redactor editor for the .selected classes.
Add the class .selected to the clicked box.
Initialize the redactor editor for the clicked box.
You can see it working here (or on this JSFiddle):
$(document).ready(function () {
var current_edit;
function destroy_redactor(param) {
console.log("destroy");
$(param).redactor('core.destroy');
}
function initialize_redactor(param) {
console.log("init");
$(param).redactor({
focus: true,
toolbarExternal: '#toolbar'
});
}
$('.redactor').on("click", function() {
if (!$(this).hasClass("selected")) {
$(".redactor").each(function () {
if($(this).hasClass("selected")) {
destroy_redactor(current_edit);
$(this).removeClass("selected");
}
});
$(this).addClass("selected");
current_edit = $(this);
initialize_redactor(current_edit);
}
});
});
#content {
max-width: 600px;
margin: 0 auto;
border: 1px solid lightgray;
}
.redactor {
border: 1px solid lightgreen;
margin: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="//imperavi.com/js/redactor/redactor.css">
<script type="text/javascript" src="//imperavi.com/js/redactor/redactor.js"></script>
<div id="toolbar_wrapper">
<div id="toolbar">
</div>
</div>
<div id="content">
<div class="redactor">
<h1>Header</h1>
<p>Paragraph</p>
</div>
<div class="redactor">
<h1>Another Header</h1>
<p>Another Paragraph</p>
</div>
</div>
I am writing a code with multiple divs that uses a button to change the background colors of divs when clicked. The background of the divs are hard coded into the html:
ex:
<div style="background-color: grey">
</div>
When I click the button, I want the background color to be permanently changed to white. However, the color only changes to white for an instant. the code is as such:
<script>
var divs=document.getElementsByTagName("div");
function noColors(){
for(i=0;i<divs.length;i++){
divs[i].style.backgroundColor="white";
}
};
</script>
<form>
<button onclick="noColors()"> I HATE THESE COLORS!!! </button>
</form>
Any help would be appreciated
Remove the form tag:
<button onclick="noColors()"> I HATE THESE COLORS!!! </button>
<div style="width: 100px;height: 100px; background-color: red"></div>
<div style="width: 100px;height: 100px; background-color: yellow"></div>
<div style="width: 100px;height: 100px; background-color: blue"></div>
<script>
var divs=document.getElementsByTagName("div");
function noColors(){
for(i=0;i<divs.length;i++){
divs[i].style.backgroundColor="white";
}
};
</script>
when the form tag is used and you click on the button the colors change but the form also submits, which leads to reload of the page. This way you loose the colors of the div elements.
I am trying to make a page in wordpress (it is built within wordpress custom page tool in admin interface).
What i want is 3 radio buttons. 2 visable 1 hidden.
The hidden one should be auto checked so it displays the correct div. (Maybe not needed when i use z-index in css?)
When a user click one of the checkboxes it should hide the another 2 divs and display the correct div (notice they are on the same place on the page).
For some reson i cant get this to work in wordpress. Or if there would be another way of doing the same way i am open for it as well.
CSS:
#apDiv3 {
position:absolute;
left:405px;
top:53px;
width:485px;
height:434px;
z-index:12;
background-color: #000;
color: #F00;
}
#apDiv10 {
position:absolute;
left:405px;
top:53px;
width:485px;
height:434px;
z-index:11;
background-color: #000;
color: #F00;
}
#apDiv11 {
position:absolute;
left:405px;
top:53px;
width:485px;
height:434px;
z-index:11;
background-color: #000;
color: #F00;
}
<script>
$(document).ready(function(){
$("input[name='payway']").click(function() {
var test = $(this).val();
$(".desc").hide();
$("#"+test).show();
});
});
</script>
HTML/PHP:
<p>
<input type="radio" name="payway" value="apDiv10" />
pay2
<input type="radio" name="payway" value="apDiv3" checked="checked" style="display:none;">
</p>
<p>
<input type="radio" name="payway" value="apDiv11" />
Pay1
</p>
<div id="apDiv3" class="desc">
This is the standard div that should be visable
</div>
<div id="apDiv10" class="desc">
Shows this div when user click on checkbox pay2
</div>
<div id="apDiv11" class="desc">
Shows when user click checkbox pay1
</div>
It seems when i looked at the head.php file there was a script that dident work which made my script not to work at all.
Once i removed the script from the head it worked.
Thank you all!