i am using touchSwipe plugin of jquery to convert swipe into click .
it seems to be working as when i swipe pages refresh or try to reach next page but same content is being displayed.
i have doubt in this line of code for next click/swipe.
window.location.href='http://something.com/aakarsha/2559277';
here is my fiddle.Any help will be great
https://jsfiddle.net/bydbest/9gsgLqst/
here is direct link
http://something.com/aakarsha/2559277
<html><body>
<p><div class="content_main_div div_100_per"><div id="timeline_content"><div><div class="content_box_main">
<div class="messagelove_box" style="" ><div class="content_box_1">
<div class="content_box_2z"><sup class="joke_icon"></sup></div>
<div class="content_box_3_title"></div>
<div class="content_box_3_text"><div style="position: absolute; top: 35%; left: 0%; margin: 0 auto; text-align: center;"></div>
<div style="position: absolute; top: 35%; right: 0%; margin: 0 auto; text-align: center;"></div>
<div id="detail_view" class="detail_view"><div class="detail_view_m" id="detail_view_m"><img src="http://image.something.com/misc/lazyg/aakarsha/people/aakarsha_aakarsha_photoshoot_stills_027_jpg_700_1052__mxoWV4za.sized.jpg" width="99%" alt="aakarsha" title="aakarsha"/>
</div><a style="top: 188.5px;" id="view_prev" class="view_prev prev" href="http://something.com/aakarsha/2559276"></a>
<a style="top: 188.5px;" id="view_next" class="view_next next" href="http://something.com/aakarsha/2559276"></a></div> </div><div class="content_box_5"><span class="vote" data-name="up" id="2559277"><span class="lipos">0 Likes</span></span></div> </div></div>
</div><script src="http://code.jquery.com/jquery-1.10.2.js"></script><script type="text/javascript" src="http://www.something.com/app/jquery.touchSwipe.min.js"></script>
<script type="text/javascript">
$("a").swipe({
swipe: function(event) {
window.location.href='http://something.com/aakarsha/2559277';
},
threshold: 75,
excludedElements: "label, button, input, select, textarea, .noSwipe"
});
</script>
</body>
</html>
i have gone through github and aware about the blocking of anchor tag so excluded the same in javascript. then also its not working
Solved the problem. it was the link which was causing problem. it works just fine now.enjoy
Related
I have 4 divs with a more-info button on the bottom of each, like so:
http://codepen.io/anon/pen/VpVbPq
And when a user presses ' more info ' I would like for it to extend to the bottom and show extra info, obviously.
The problem is under the more-info div, text is seen, but what if I want to hide whats under it, even if its opacity is 0.6 ?
I thought it would've been the best if I draw what I need, so here:
Codepen code below:
html
<body>
<div class="wrapper">
<div class="info">
<p>
dummy text
</p>
<div class="more-info">more info</div>
</div>
<div class="info"><div class="more-info">more info</div></div>
<div class="info"><div class="more-info">more info</div></div>
<div class="info"><div class="more-info">more info</div></div>
</div>
</body>
css
.wrapper {
width: 1045px;
margin: 0 auto;
}
.info {
width: 500px; height: 200px;
background-color: #1A5AB6;
display: inline-block;
margin: 10px;
position: relative;
font-size: 20px;
overflow: hidden;
}
.more-info {
width: 100%; height: 40px;
background-color: #0C1B44;
bottom: 0; left: 0;
display: inline-block;
position: absolute;
font-size: 20px;
color: white;
line-height: 35px;
text-align: center;
opacity: 0.6;
}
.more-info:hover {background-color: #010716;}
In order to have the text expand, you can use a little jQuery to set the height to automatically adapt to however much text there is, and hide the 'more info' button entirely:
$(".more-info").on("click", function() {
$(this).css("opacity", "0");
$(this).parent().css("height", "auto");
});
With regards to not having the text visible behind the 'more info' button, you would need to set the opacity to 1:
.more-info {
opacity: 1;
}
This naturally distorts the colour a little, but you can always change the background colour and hover colour to cover this.
I've created an updated pen showcasing this here.
Hope this helps! :)
change your class selector definition as shown below:
.more-info {
width: 100%; height: 20%;
background-color: #0C1B44;
font-size: 20px;
color: white;
display: block;
text-align: center;
opacity: 0.6;
}
Then add this css for your paragraph element:
p {
height: 75%;
overflow: hidden;
margin: 5px;
}
Your question: "what would be the best way to make a sort of drop-down-more-info div?"
There is a built in function in Boot Strap that allows you to use a "data" class that does all the crunching for you. Just call on their css and js files externally or host on your server. Familiarize yourself with their data classes and call on their css/js classes to simplify previously arduous coding, like revealing a hidden DIV on click!
Note the data-toggle="collapse" and data-target="#more_info" lines in my div that holds the span tag that is the control for revealing the hidden <div id="more_info">:
`<div data-toggle="collapse" data-target="#more_info"><span class="glyphicon glyphicon-search"></span> <span title="Click for more info">more info</span></div>`
Then note the class in my hidden div. Note the id of the hidden div and the data-target #more_info. This can be used for classes as well, ie: .more_info. Everything is explained in more detail at bootstrap Github or their official site: http://getbootstrap.com/
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> </script>
</head>
<body>
<div class="wrapper">
<div class="info">
<p>
Honestly, Bootstrap would be the easiest way to accomplish this without a doubt. Just click the more info button below.
</p>
<div data-toggle="collapse" data-target="#more_info"><span class="glyphicon glyphicon-search"></span> <span title="Click for more info">more info</span></div>
<div id="more_info" class="collapse">Some hidden infomration you ony want to be seen when the user click on the control link.</div>
</div>
or add three divs floating perfectly without all the css, each with drop downs more info.
<body>
<div class="wrapper row">
<div class="col-md-4">
<p>
Honestly, Bootstrap would be the easiest way to accomplish this without a doubt. Just click the more info button below.
</p>
<div data-toggle="collapse" data-target="#more_info">
<span class="glyphicon glyphicon-search"></span>
<span title="Click for more info">more info</span> </div>
<div id="more_info" class="collapse">
Some hidden information you only want to be seen when the user click on the control link.
</div>
</div>
<div class="col-md-4">
<p>
Some other information we want to have a hidden drop down with more info for.
</p>
<div data-toggle="collapse" data-target="#more_info2">
<span class="glyphicon glyphicon-search"></span>
<span title="Click for more info">more info</span>
</div>
<div id="more_info2" class="collapse">
Some hidden information you only want to be seen when the user click on the control link.</div>
</div>
<div class="col-md-4">
<p>
Yet another div with info that has a drop down menu for more info included below.
</p>
<div data-toggle="collapse" data-target="#more_info3">
<span class="glyphicon glyphicon-search"></span>
<span title="Click for more info">more info</span>
</div>
<div id="more_info3" class="collapse">
Some hidden infomration you ony want to be seen when the user click on the control link.
</div>
</div>
Best of luck.
A fellow web designer had dragged all of the HTML/CSS/JS from a Wix website to our normal website. Now the boss has asked me to do something, and I can't decipher this absolute brick of HTML. There's a position issue that makes it so if I add any text it smushes it all together.
I can fix the position issue with just a quick fix in Firebug, but if I go to edit the HTML I have no clue what the hell is going on.
Is there a way to wade my way through this?
Some of the "fun" HTML:
<div class="s45_border" data-reactid=".0.$SITE_ROOT.$desktop_siteRoot.$PAGES_CONTAINER.1.1.$SITE_PAGES.$mainPage.1.$comp-ihwc6mj1.0"></div>
<div style="height: 100%; z-index: 0;" data-gallery-id="comp-ihwc6mj1" id="comp-ihwc6mj1itemsContainer" class="s45itemsContainer" data-reactid=".0.$SITE_ROOT.$desktop_siteRoot.$PAGES_CONTAINER.1.1.$SITE_PAGES.$mainPage.1.$comp-ihwc6mj1.1">
<div data-image-index="0" data-displayer-width="1250" data-displayer-height="875" data-displayer-uri="90619a_86ac8e3a77144c20ba0d06e5d2df93ed.png" data-height-diff="0" data-width-diff="0" data-bottom-gap="0" data-image-wrapper-right="0" data-image-wrapper-left="0" data-image-wrapper-top="0" data-image-wrapper-bottom="0" data-margin-to-container="0" style="position: absolute; left: 0px; top: 0px; visibility: inherit; opacity: 1; height: 321px; width: 977px;" class="s45imageItem" data-state="notShowPanel desktopView unselected clipImage transIn normal noLink" id="comp-ihwc6mj1dataItem-ihwccgkv0" data-reactid=".0.$SITE_ROOT.$desktop_siteRoot.$PAGES_CONTAINER.1.1.$SITE_PAGES.$mainPage.1.$comp-ihwc6mj1.1.$2dataItem-ihwccgkv"><p></p>
<div style="height: 321px; width: 977px; margin: 0px;" id="comp-ihwc6mj1dataItem-ihwccgkv0imageWrapper" class="s45imageItemimageWrapper" data-reactid=".0.$SITE_ROOT.$desktop_siteRoot.$PAGES_CONTAINER.1.1.$SITE_PAGES.$mainPage.1.$comp-ihwc6mj1.1.$2dataItem-ihwccgkv.0">
<div style="cursor:default;" id="comp-ihwc6mj1dataItem-ihwccgkv0zoom" class="s45imageItemzoom" data-reactid=".0.$SITE_ROOT.$desktop_siteRoot.$PAGES_CONTAINER.1.1.$SITE_PAGES.$mainPage.1.$comp-ihwc6mj1.1.$2dataItem-ihwccgkv.0.0">
<div style="width:977px;height:321px;position:relative;overflow:hidden;" id="comp-ihwc6mj1dataItem-ihwccgkv0image" class="s45imageItemimage" data-reactid=".0.$SITE_ROOT.$desktop_siteRoot.$PAGES_CONTAINER.1.1.$SITE_PAGES.$mainPage.1.$comp-ihwc6mj1.1.$2dataItem-ihwccgkv.0.0.0">
<div class="s45imageItemimagepreloader" id="comp-ihwc6mj1dataItem-ihwccgkv0imagepreloader" data-reactid=".0.$SITE_ROOT.$desktop_siteRoot.$PAGES_CONTAINER.1.1.$SITE_PAGES.$mainPage.1.$comp-ihwc6mj1.1.$2dataItem-ihwccgkv.0.0.0.0"></div>
<p><img src="http://truespeed.ca/wp-content/uploads/2016/06/severroom.png" id="comp-ihwc6mj1dataItem-ihwccgkv0imageimage" alt="" style="width: 977px; height: 321px; object-fit: cover;" data-reactid=".0.$SITE_ROOT.$desktop_siteRoot.$PAGES_CONTAINER.1.1.$SITE_PAGES.$mainPage.1.$comp-ihwc6mj1.1.$2dataItem-ihwccgkv.0.0.0.$image"></p></div>
<p></p></div>
The funny looking things might come from "react" https://facebook.github.io/react/
You could look somewhere inside of the JavaScript files for the according "react-templates" which are actually responsible for the markup if you want to change something there.
But if it is just positioning, shouldn't some CSS changes do it?
Have you tried rules using "!important"?
I have some reveal slideshow that I need to convert to a single page html. I've used jQuery to strip the code of all the reveal.js added classes, javascript, and stylesheets. For some reason, when I resize the page, a style is added to the div that hides half the content.
My code before resizing:
<div id="body">
<div id="slides-body">
<section id="slide-Title">
<div id="div-Title">
<h2>
My Title
</h2>
<button id="button-Single-Page" style="padding-bottom: 5px" class="smallButton" onclick="singlepagehtmlformat()">Click here for the single page html version.</button>
</div>
</section>
</div>
</div>
My code after resizing:
<div id="body">
<div id="slides-body" style="width: 960px; height: 770px; left: 50%; top: 50%; bottom: auto; right: auto; transform: translate(-50%, -50%) scale(0.920625);">
<section id="slide-Title">
<div id="div-Title">
<h2>
My Title
</h2>
<button id="button-Single-Page" style="padding-bottom: 5px" class="smallButton" onclick="singlepagehtmlformat()">Click here for the single page html version.</button>
</div>
</section>
</div>
</div>
Why is this happening? How can I fix it?
That is not the default behavior, there must be a window resize event as pointed by #Bas Van Stein delegated in the code causing that.
To fix, it you can just remove the attr "style" from the target div.
<script>
$().ready(function(){
$( window ).resize(function() {
$("#slides-body").removeAttr("style");
});
});
</script>
Example : http://jsfiddle.net/mzg2zk48/2/
I am developing a web game. Now i need to display a webpage, in a dialog, within my game stage.
And i know a solution, using jqueryui:
<div id="swf"></div> <!-- this will be replaced by game flash object -->
<div id="myDialog">
<iframe id="myFrame"></iframe>
</div>
<script>
$("#myDialog").dialog({
open: function(ev, ui){
$("#myFrame").attr("src", "http://xxx");
}
});
</script>
This solution need me to set "wmode" of flash object to be "opaque".
But for performance, i need to use "wmode=direct", and if i use "wmode=direct", the jquery dialog has some ploblem: titlebar is hided behind flash object, so that, i cannot drag(move) the dialog or close the dialog.
Are there other solution, without changing "wmode"? I've seen a solution, but i don't know how to do it. here are some code generated by that solution:
<iframe class="dialog_mask" frameborder="no" scrolling="no" src="about:blank" style="visibility: visible; left: 331px; top: 88px; width: 702px; height: 481px;"></iframe>
<div class="dialog_wrap" style="visibility: visible; left: 331px; top: 88px; width: 700px; z-index: 5007;">
<div class="dialog_header" style="cursor: move;">
<h3>the title</h3>
<button title="close"></button>
</div>
<div class="dialog_content" style="height: 450px;">
<iframe class="dialog_frame" frameborder="no" scrolling="no" src="http://xxx" style="width: 700px; height: 450px;"></iframe>
</div>
</div>
<object type="application/x-shockwave-flash" ...><param name="wmode" value="window"></object>
give the #myDialog div a height and width greater than your flash SWF.
I am creating a single page website with a fixed navigation. Within the navigation there are two containers, the one on the left contains a series of headers that change as you click the links on the right. I am setting the display on each of the classes containing the headers to 'none' and attempting to display them with Jquery when you click the links on the right. But nothing I am trying is working. Is it possible to get a smooth transition using the fade element and Jquery to achieve a series of headers that change upon clicking the links?
Here is my code:
<div class="single-page-nav">
<div class="nav-container">
<div style="max-width: 1200px; min-width: 960px; margin: 0 auto; position: relative;">
<div style="position: absolute; right: 0; top: 40px; z-index: 999999;">
Home
About Us
Practice Areas
Contact
</div>
</div>
<div class="left">
<div class="header001"><h1>Doug Peterson</h1></div>
<div class="header002"><h1>About Us.</h1></div>
<div class="header003"><h1>Practice Areas.</h1></div>
<div class="header004"><h1>Contact.</h1></div>
</div>
<div class="nav"></div>
<div class="clearboth"></div>
</div>
</div>
Help the student.
Here is a basic working version of what it sounds like you want. You will need to style it to look the way you want, but the behavior (showing/hiding divs on click of the menu) is there. You might think about changing the naming scheme for hrefs and divs to make it easier to select the header div based on the link clicked.
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"> </script>
<style>
.header{
display: none;
}
</style>
<script>
$(document).ready(function() {
var selected = '';
$( "a", "#headerLinks" )
.on( "click", function(){
var divCls = ".header00" + $( this ).attr( "href" ).substring($( this ).attr( "href" ).length -1 );
if( selected.length > 0 ){
$( selected, "#headers" )
.hide('fade', function(){
$( divCls, "#headers" )
.show('fade');
});
}else{
$( divCls, "#headers" )
.show('fade');
}
selected = divCls;
});
});
</script>
</head>
<body>
<div class="single-page-nav">
<div class="nav-container">
<div style="max-width: 1200px; min-width: 960px; margin: 0 auto; position: relative;">
<div id="headerLinks" style="position: absolute; right: 0; top: 40px; z-index: 999999;">
Home
About Us
Practice Areas
Contact
</div>
</div>
<div class="left" id="headers">
<div class="header header001"><h1>Doug Peterson</h1></div>
<div class="header header002"><h1>About Us.</h1></div>
<div class="header header003"><h1>Practice Areas.</h1></div>
<div class="header header004"><h1>Contact.</h1></div>
</div>
<div class="nav"></div>
<div class="clearboth"></div>
</div>
</div>
</body></html>