We Keep Coding

How to remove data-toggle="modal" in specific window size?

I am a beginner of the javascript. I want to remove the data-toggle attribute when the screen size is less than 760px and make the href working. I have no idea how to remove the data-toggle attribute, below is my code:
<div class="portfolio logo1 mix_all" data-cat="logo" style="display: inline-block; opacity: 1;">
<div class="portfolio-wrapper">
<a data-toggle="modal" data-target="#myModal1" href="http://www.example.com/main/includes/onepager/business_service/example/index.php" class="b-link-stripe b-animate-go thickbox">
<img class="p-img" src="http://www.example.com/theme/mobile-page-files/web/images/small-portfolio/example.JPG" />
<div class="b-wrapper">
<h2 class="b-animate b-from-left b-delay03">
<img src="http://www.example.com/theme/mobile-page-files/web/images/link-ico.png" alt=""/>
</h2>
</div>
</a>
</div>
<div class="port-info">
<h4>
Example
</h4>
</div>
</div

At the bottom of your page (just before the </body> tag) add the following code :
if(window.innerWidth < 760){
document.getElementsByTagName("a")[0].removeAttribute("data-toggle");
}

Nobody addressed the case when the screen width might again be greater than 760. We'll have to add the data attribute back.
window.addEventListener("resize", resizeHandler);
function resizeHandler() {
var winWidth = window.innerWidth,
threshold = 760,
els = document.getElementsByClassName('thickbox');
[].forEach.call(els, function (el) {
if (winWidth < threshold) {
el.removeAttribute("data-toggle");
} else {
el.setAttribute("data-toggle", "bar");
}
});
}
Check out this tiny demo to see it in action. http://codepen.io/antibland/pen/reZNNO

You can use a bit of jQuery... Don't forget to update the selector ELEMENTID
if($(window).width() < 760){
$('#ELEMENTID').find('a').removeAttr('data-toggle');
}

jquery - can't get the elements to fadeOut / fadeIn

I've wrote this code in order to replace the text regarding the img they are clicking.
I can't understand why my code isn't executing, I looked it over and over again.
I hope someone can find my mistake :(
This is the jQuery code:
$(document).ready(function() {
$('#text-1').fadeIn(500);
//click event
$('.img').click(function() {
var currentId = $(this).attr('id');
alert(currentId);
if (currentId===3) {
$('#text-3').fadeIn('fast');
$('#text-2, #text-1').css('display', 'none');
} else if (currentId===2) {
$('#text-2').fadeIn('fast');
$('#text-1, #text-3').css('display', 'none');
} else if (currentId===1) {
$('#text-2').fadeIn('fast');
$('#text-1, #text-3').css('display', 'none');
}
});
});
and this is the HTML:
<div>
<div id="icon">
<a id="1" class="img" href=""><img style="background: url(http://images.webydo.com/10/100459/169860/hutim.jpg) 0 0;" src="" /></a>
<a id="2" class="img" href=""><img style="background: url(http://images.webydo.com/10/100459/Folder%201/work_electric_main_banner.png) -20px -10px;" src="" /></a>
<a id="3" class="img" href=""><img src="http://hviil.co.il/wp-content/uploads/2013/02/DS-2CD7254F-EIZ-310x310.jpg" alt="מצלמות אבטחה" /></a>
</div>
<div id="text">
<div id="text-1" class="textbox">
<h2>1</h2>
<p>adssssssssssssssssssssssasdsaaaaaaaaaaaaaaaaaaaa</p>
<div id="text-2" class="textbox">
<h2>2</h2>
<p>adssssssssssssssssssssssasdsaaaaaaaaaaaaaaaaaaaa</p>
</div>
<div id="text-3" class="textbox">
<h2>3</h2>
<p>adssssssssssssssssssssssasdsaaaaaaaaaaaaaaaaaaaa</p>
</div>
</div>
</div>
Please help!!!!
Thanks

Problem is in your condition checking
instead of using such that
currentId===3 // checks that currentId is numeric 3
Use
currentId=='3' //changed === to ==, check that currentId is string type 3
And one more thing, after clicking a your page is redirecting, so if you want to prevent this, use preventDeault or put # in your href.

HTML
<div>
<div id="icon">
<a id="1" class="img" href=""><img style="background: url(http://images.webydo.com/10/100459/169860/hutim.jpg) 0 0;" src="" /></a>
<a id="2" class="img" href=""><img style="background: url(http://images.webydo.com/10/100459/Folder%201/work_electric_main_banner.png) -20px -10px;" src="" /></a>
<a id="3" class="img" href=""><img src="http://hviil.co.il/wp-content/uploads/2013/02/DS-2CD7254F-EIZ-310x310.jpg" alt="מצלמות אבטחה" /></a>
</div>
<div id="text">
<div id="text-1" class="textbox">
<h2>1</h2>
<p>adssssssssssssssssssssssasdsaaaaaaaaaaaaaaaaaaaa</p>
<div id="text-2" class="textbox">
<h2>2</h2>
<p>adssssssssssssssssssssssasdsaaaaaaaaaaaaaaaaaaaa</p>
</div>
<div id="text-3" class="textbox">
<h2>3</h2>
<p>adssssssssssssssssssssssasdsaaaaaaaaaaaaaaaaaaaa</p>
</div>
</div>
</div>
JS
$(document).ready(function() {
$('#text-1').fadeIn(500);
//click event
$('.img').click(function() {
var currentId = $(this).attr('id');
alert(currentId);
if (currentId==3) {
$('#text-3').fadeIn('fast');
$('#text-2, #text-1').css('display', 'none');
} else if (currentId==2) {
$('#text-2').fadeIn('fast');
$('#text-1, #text-3').css('display', 'none');
} else if (currentId==1) {
$('#text-2').fadeIn('fast');
$('#text-1, #text-3').css('display', 'none');
}
});
});
WORKING LINK
http://jsbin.com/heseforaxe/1/edit?html,js,output

var currentId = $(this).attr('id');
All the value of attributes is string ,not number.
so,you can change like this.
currentId==="3";
or
currentId==3;

currentId===3 this should be changed to currentId==3 because the returned id is string
because there is a post back when clicking the link you need to add ref="#" to the a tag
there are missing closing tags on div id='text-1' and the main div
you can find a working copy of this from this url "http://jsfiddle.net/t3L1fkuh/6/" (i have removed the images because 2 of them does not load).
.textbox{
display: none;
}
the above class is added so that it adds the fade in effect on page load

.hover() works, but not for each individual item

I am trying to make a button appear on hover and disappear when the mouse moves away from the object. There are lots of posts, like you might find on the Twitter feed but I only want the button to appear on the post you're hovering over, not all of them. Here is my code:
$(".posts").hover(function() {
$(this).find("article .report-post").css('visibility', 'visible');
$(this).find("article .report-post .report-btn").css('visibility', 'visible');
}, function () {
$(this).find("article .report-post").css('visibility', 'hidden');
$(this).find("article .report-post .report-btn").css('visibility', 'hidden');
});
What am I doing wrong? If I do this, nothing happens:
$("article").hover(function() {
$(this).find(".report-post").css('visibility', 'visible');
$(this).find(".report-post .report-btn").css('visibility', 'visible');
}, function () {
$(this).find(".report-post").css('visibility', 'hidden');
$(this).find(".report-post .report-btn").css('visibility', 'hidden');
});
Is that perhaps because there are lots of <article>s on the webpage?
EDIT: Here is the HTML of one of the <article>s:
<article class="single-post">
<div class="profile-pic">
<a href="tg">
<div style="background-image:url(example.jpg);background-size:cover;width:70px;height:70px;"></div></a>
</div><!-- profile-pic -->
<div class="text">
<h5 class="tg" id="CMfQ34erT6-author">Tristram Gale</h5><a class="report-post" href="#" id="CMfQ34erT6" style="visibility: hidden;">
<div class="report-btn" style="visibility: hidden;"></div></a>
<p class="post-text">LALALALALALALALALALALA</p>
<div class="details">
<ul>
<li style="text-overflow: ellipsis;width: 170px;white-space: nowrap;overflow: hidden;">
Devonport High School for Boys
</li>
<li style="list-style: none; display: inline">
<a href="post.php?id=CMfQ34erT6">
<ul>
<li title="2013-07-02 21:16:57">about 15 hours ago</li>
</ul>
<ul class="comments" id="CMfQ34erT6">
<li>
0 comments
</li>
</ul></a>
</li>
</ul>
</div>
<div class="comments-box" id="CMfQ34erT6-box" style="display: none;">
<div id="CMfQ34erT6-comment-box">
<ul>
<li class="CMfQ34erT6-new-comment">
<form class="CMfQ34erT6-form" id="CMfQ34erT6" name="CMfQ34erT6">
<input autocomplete="off" id="newCommentText" placeholder="Write a comment..." type="text"><input id="addcomment" onclick="return postComment(this.form.id, this.form.newCommentText.value)" type="button" value="Post">
</form>
</li>
</ul>
</div>
</div>
</div><!-- text -->
<div class="clear"></div><!-- clear -->
</article>
Thanks

If you are not planning to use the hover() functions for something else in Javascript you can do it completely in CSS.
Remove the style="visibility: hidden;" attributes from the button and link and add this to your CSS:
article .report-post {
visibility: hidden;
}
article:hover .report-post {
visibility: visible;
}
The button will only be visible as long as the cursor is over the article.
jsfiddle is online again: http://jsfiddle.net/GeraldS/6MQv7/

Okay, I've tested this on jsfiddle but their server is down now - see http://www.isitdownrightnow.com/jsfiddle.net.html
In HTML change the style attribute from visibility:hidden to display:none for div and a as well.
And then the following code works:
$(".posts .single-post").hover(function() {
$(this).find(".report-post").show();
$(this).find(".report-btn").show();
}, function () {
$(this).find(".report-post").hide();
$(this).find(".report-btn").hide();
});

Try these things:
Make sure you've put the hover() function inside document.ready()
There was no text inside the class .report-btn. Make sure you can see the button, when everything is set to visible.
There is no need of the .find, make it simple...
for eg, try this code:
$(function() {
$('article').hover(function() {
$(".report-post").css('visibility', 'visible');
$(".report-post .report-btn").css('visibility', 'visible');
}, function () {
$(".report-post").css('visibility', 'hidden');
$(".report-post .report-btn").css('visibility', 'hidden');
});
});
If it still doesn't work, try the "display:none" and the "display:block" instead of the "visibility"

Minor tweak to this javascript function?

I have a script that shows/hides used via onClick. I can get it to show/hide just fine, but I can't get it to show/'hide everything else'. So what I get is a bunch of open containers when I really want just the one.
Javascript:
<script>
function showfields(fields){
if(document.getElementById(fields).style.display=='none'){
document.getElementById(fields).style.display='block';
}
else{
document.getElementById(fields).style.display = 'none';
}
}
</script>
HTML:
<div id="hidden" class="steps" style="display: block;">
<div class="section" style="margin-right: 10px;">
<h2>Something</h2>
</div>
<button class="continue dropdown" id="showLink" onClick="showfields('hidden2');return false;" href="#">Continue</button>
</div>
<div id="hidden2" class="steps" style="display: block;">
<div class="section" style="margin-right: 10px;">
<h2>Something2</h2>
</div>
<button class="continue dropdown" id="showLink" onClick="showfields('hidden3');return false;" href="#">Continue</button>
</div>
<div id="hidden3" class="steps" style="display: block;">
<div class="section" style="margin-right: 10px;">
<h2>Something3</h2>
</div>
<button class="continue dropdown" id="showLink" onClick="showfields('hidden3');return false;" href="#">Continue</button>
</div>
<div id="hidden4" class="steps" style="display: block;">
<div class="section" style="margin-right: 10px;">
<h2>Something4</h2>
</div>
<button class="continue dropdown" id="showLink" onClick="showfields('hidden4');return false;" href="#">Continue</button>
</div>
Thanks

Since you've tagged this with jQuery I assume that is an option:
function showfields(fields){
$('.steps').hide()
$('#' + fields).show();
}

Edit:
Is this what you're trying to do: http://jsfiddle.net/Rykus0/67cjt/2/
(without jQuery)
(ps - this can be done better)
Your question is not very clear, but I'm guessing that you want the page to start with the everything but the first div hidden.
In that case, what you have is fine, just set style="display:none;" on the elements you don't want to show at first (you can also use a class).
Also, I believe you should change the onclick call on hidden3 to be showfields('hidden4') and remove the onclick event from hidden4

I agree with Porco,
Another option would be using a class as a flag, for example
function showFields(fields){
$(fields).each(function(){
if($(this).hasClass('visible'){
$(this).hide();
}
else {
$(this).show();
}
}
}

Without using jquery .This piece of javascript may help you
<script>
function showfields(fields){
for(var i=0;i<document.body.getElementsByTagName("*").length;i++)
{ if(document.body.getElementsByTagName("*")[i].id==field)
{
document.body.getElementsByTagName("*")[i].style.display='block';
}
else{
document.body.getElementsByTagName("*")[i].style.display='block';
}
}
</script>

jquery toggle between divs and subsequently hide active div

a play on a similar question asked by me that was graciously answered.
three divs, all hidden. jquery toggles between them via different links. this works great! now, i'd like to clink the link corresponding to the active div and hide it, esentially the same as when the page loads with all of them hidden. right now it fades out and back in.
help! thank you!
HTML:
<div id="nav">
<a class="home" id="show_about" title="About">ABOUT</a><br />
<a class="home" id="show_subscribe" title="Subscribe">SUBSCRIBE</a><br />
<a class="home" id="show_contact" title="Contact">CONTACT</a>
</div>
<div id="content">
<div class="current" id="about">
<p>ABOUT's content</p>
</div>
<div id="subscribe">
<p>SUBSCRIBE's content</p>
</div>
<div id="contact">
<p>CONTACT's content</p>
</div>
</div>
Javascript:
$(function(){
$('#about').css('display', 'none');
$('#subscribe').css('display', 'none');
$('#contact').css('display', 'none');
});
$('.home').click(function(){
var id = $(this).html().toLowerCase();
$('.current').fadeOut(600, function(){
$('#'+id).fadeIn(600);
$('.current').removeClass('current');
$('#'+id).addClass('current');
});
});

Try this out..
Since on fadeOut the current class is removed, if the size of current is 0 it means nothing is selected. We can simply fadeIn the content div.
$('#about, #subscribe, #contact').hide();
$('.home').click(function() {
var id = $(this).html().toLowerCase();
var $content = $('#' + id + ':not(:visible)');
if ($('.current').length === 0) {
showContent($content)
}
else {
$('.current').fadeOut(600, function(){showContent($content)});
}
});
function showContent(content) {
content.fadeIn(600);
$('.current').removeClass('current');
content.addClass('current');
}
Example on jsfiddle.

Here is another approach:
$(function(){
$('#content div').hide();
});
$('.home').click(function(){
var targetSelector = '#' + $(this).attr('title').toLowerCase();
var targetShown = $(targetSelector).is(':visible');
if (targetShown) {
$(targetSelector).fadeOut(600);
} else {
$('#content div:not(' + targetSelector + ')').fadeOut(600,
function() {$(targetSelector).fadeIn(600)});
}
});

Check to see if the id of the clicked element is equal to the id of the element currently being displayed (i.e. the element with the current class). If it is a different element, then a swap needs to take place. If it is the same element, then it needs to be hidden and have its current class removed...
(Edit: fixed code)
HTML:
<div id="nav">
<a class="home" id="show_about" title="About">ABOUT</a><br />
<a class="home" id="show_subscribe" title="Subscribe">SUBSCRIBE</a><br />
<a class="home" id="show_contact" title="Contact">CONTACT</a>
</div>
<br />
<br />
<br />
<div id="content">
<div id="about">
<p>ABOUT's content</p>
</div>
<div id="subscribe">
<p>SUBSCRIBE's content</p>
</div>
<div id="contact">
<p>CONTACT's content</p>
</div>
<div class="current" id="dummy"></div>
</div>
JS:
$().ready(function()
{
$('#about').hide();
$('#subscribe').hide();
$('#contact').hide();
$('#dummy').hide();
$('.home').click(function() {
var id = $(this).html().toLowerCase();
if ($('.current').length >0) {
if($('.current')[0].id.toLowerCase() != id)
{
$('.current').hide();
$('.current').removeClass('current');
$('#'+id).addClass('current');
$('#'+id).show();
}
else
{
$('.current').hide();
$('.current').removeClass('current');
$('#dummy').addClass('current');
}
}
});
});
Just replace the .hide()'s and .shows()'s with fades in and out.