So, I'm having trouble trying to figure out how to make the 2 left divs (volunteer sign-up and Request a volunteer) on my home page be clickable links. I currently have them change color when you hover over them but how do I make them link to there appropriate page. Any help w
http://partners.sbceo.org
Wrap the div in an anchor tag.
<a href="your-link-here">
<div></div>
</a>
<div class="mydiv" data-href="http://stackoverflow.com"></div>
<script>
$('.mydiv').on('click', function(){
window.location = $(this).data('href');
})
</script>
this way you could use more than one clickable div
Give the div a class or other identifier. Then using jQuery do something like:
$('identifier').click(function(){
window.location = "your url";
});
None jQuery:
<div id="hello"></div>
function linkTo(url){
window.location = url;
}
el = document.getElementById('hello');
el.onclick = linkTo('some website');
i can't see the link but you can do this using Javascript:
<div style="cursor: pointer;" onclick="window.location='http://google.com/'">
</div>
Related
I have this in line of code
<a class="btn btn-block btn-lg" ng-class='login.anchorClass' ng-href="{{login.idp_authnrequest_url}}"><img src="{{login.file_name}}"/>{{login.name}}</a>
But this displays url in bottom left which I want to hide ( that's the requirement). Can anyone help with this?
Since those links comes from ng-repeat I tried onclick="location.href='({{login.idp_authnrequest_url}})'"
but that only opens last url on every anchor tag click. Also thought about using button instead of anchor tag but since I have multiple button how would that work?
Welcome to Stack Overflow.
Have you try using jquery:
$(function(){
$("a").each(function (index, element){
var href = $(this).attr("href");
$(this).attr("hiddenhref", href);
$(this).removeAttr("href");
});
$("a").click(function(){
url = $(this).attr("hiddenhref");
window.location.href = url;
})
});
This works for me.
Here the reference answer https://stackoverflow.com/a/56340724/13955999
Im trying to put :focus on div so it will focus with other colors when href link is clicked, is it possible ?? Any help would be appreciated.
Below are my current progress
eg: Fiddle Demo
Expected result, when click on the href link, it will focus on the div background (like hover do).
i have no idea how to convert this to javascript
$("#colOne ul li").click(function(){
$("#colOne ul li").removeClass("active");
$(this).addClass("active")
})
You need li action so you need to use Either Jquery or Javascript.
Use following JavaScript will solve your issue.
HTML:
<div id="colOne">
<h3>Fruit</h3>
<div class="bg1">
<ul>
<li class="litest">Apple</li>
<li class="litest">Orange</li>
<li class="litest">Banana</li>
</ul>
</div>
</div>
Javascript:
<script language="javascript">
var buttons = document.getElementsByClassName("litest");
for(var i = 0; i < buttons.length; ++i){
buttons[i].onmousedown = function() {
this.setAttribute("class", "active");
}
}
</script>
You can use this.classList.toggle('active'); instead of this.setAttribute("class", "active"); to add and remove effect.
Check Fiddle.
If you like to use JQuery use following JQuery code:
$(function(){
$("li").bind("click", function(){
$(this).addClass('active');
});
});
Edit:
Here i edited my fiddle as per your requirement.
Check Fiddle.
It sounds like you want an event listener on your li's, not a :focus pseudo class. If you set up a couple classes to reflect the colors you want, you can just switch between them on click. I suggest jQuery's toggleClass to get this done.
I'm working on a one single page navigation system; Is there is a way to change the <title> of a page when a div is :target (#divname in url)?
EDIT: Yeah, sorry, a Jquery/javascript solution works as well.
If the url contains #somePage, use #somePage as a selector and retrieve it's data-title value.
Then set <title></title> as that value. location.hash produces #somePage
$('a').click(function(event){
event.preventDefault();
if(location.hash) {
var newPageTitle = $(location.hash).data('title');
$('title').text(newPageTitle);
}
});
Add a data attribute to your div and set it's value to what the page title should be when that link is clicked.
Some Page
<div id="somePage" data-title="This Is The Page Title"></div>
It can be done in following way:
Assume that you have this html element:
<a onclick="onClick1()" href="#test">
link
</a>
and you have this scripts:
<script>
function onClick1(){
setTimeout(onClick,100);
}
function onClick(){
alert(1);
if(document.URL.indexOf("#test")>=0){
document.title = "Your title";
}
}
</script>
then you'll get on click what you need.
Here is example.
There is a HTML content which users can freely edit. Thats OK, but I have to move all IFRAME into a DIV. Im trying with this:
$('#rolunk_content iframe').html ('<div>1' + $('#rolunk_content iframe').html() + '2</div>');
but that has no effect.
EDIT: a fiddle: http://jsfiddle.net/nE3jG/
That's because your code is trying to set the innerHTML of an iframe, which obviously won't work... And the rest of your logic is wrong too...
Try:
$("#rolunk_content iframe").each(function() {
var div = document.createElement('div'),
rel = this.nextSibling, par = this.parentNode;
div.appendChild(document.createTextNode("1"));
div.appendChild(this); // the iframe
div.appendChild(document.createTextNode("2"));
par.insertBefore(div,rel);
});
Vanilla JS may be lengthier to write, but it is more reliable in terms of doing what you expect it to do ;)
If you just want to move IFRAME into a DIV, you can use jQuery .append() API .
$("#newdiv").append($("#rolunk_content iframe"));
Your code could go like this:
<div id="rolunk_content">
<p><iframe src="...." width="200" height="200"></iframe></p>
</div>
<input id="d" type="button">
<hr>
<div id="newdiv">Your IFRAME will be moved here.</div>
And JavaScript:
$('#d').click(function() {
$("#newdiv").append($("#rolunk_content iframe"));
});
The Fiddle is here:
http://jsfiddle.net/2HrA4/
And the document of jQuery .append() is here:
https://api.jquery.com/append/
i'm doing a goto link in web page, with an input text aside it.
the goto link appear both on top and bottom of webpage.
<div class="gotopage">
goto page<input type="text" class="page_i"/>
Go
</div>
in jquery, i need to get text beside link:
$('a.Goto').live('click',function(){
window.location.href = ...;
});
how to get text value, it shouldn't be id, for id appear twice.
Use prev() to get sibling text input:
$('a.Goto').live('click',function(){
window.location.href = $(this).prev('.page_i').val();
});
Wrap the text in a span tag:
<div class="gotopage">
<span>goto page</span><input type="text" class="page_i"/>
Go
</div>
Then select it
$('a.Goto').live('click',function(){
window.location.href = $(this).closest('span').text();
});
You can get text of an input box by using this code
<script>
$('a.Goto').live('click',function(){
txt=$('.gotopage .page_i').val();
alert(txt);
});
</script>