My problem is i want to make this post in one line and scroling on the x and the y hidden
My html
<div id='related-post'>
<div class='relhead'>
<h5><span>أنميات أخرى</span></h5>
<div class='clear'/>
<b:loop values='data:post.labels' var='label'
<script expr:src='"/feeds/posts/default/-/" + data:label.name +
"?
alt=json-in-script&callback=relpostimgcuplik&"'
type='text/javascript'/>
</b:loop>
<ul id='related-summary'>
<script type='text/javascript'>relatedscript();</script>
</ul>
</div>
</div>
My css`
#related-post { display : inline-block; font-family: 'jsbold'; font-size:
14px; padding-bottom: 7px; border-bottom: 4px solid $(main.color); line-
height: 18px; font-weight: 700; color: #111; text-transform: uppercase;}
My java script
<script type='text/javascript'>
//<![CDATA[
//Related Post
var relnojudul = 0;
var relmaxtampil = 8;
var numchars = 90;
var reljudul=new Array();var relurls=new Array();var relcuplikan=new Array();var relgambar=new Array();function saringtags(g,h){var e=g.split("<");for(var f=0;f<e.length;f++){if(e[f].indexOf(">")!=-1){e[f]=e[f].substring(e[f].indexOf(">")+1,e[f].length)}}e=e.join("");e=e.substring(0,h-1);return e}function relpostimgcuplik(h){for(var e=0;e<h.feed.entry.length;e++){var g=h.feed.entry[e];reljudul[relnojudul]=g.title.$t;postcontent="";if("content" in g){postcontent=g.content.$t}else{if("summary" in g){postcontent=g.summary.$t}}relcuplikan[relnojudul]=saringtags(postcontent,numchars);if("media$thumbnail" in g){postimg=g.media$thumbnail.url}else{postimg="http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.GIF"}relgambar[relnojudul]=postimg;for(var f=0;f<g.link.length;f++){if(g.link[f].rel=="alternate"){relurls[relnojudul]=g.link[f].href;break}}relnojudul++}}function contains(a,e){for(var f=0;f<a.length;f++){if(a[f]==e){return true}}return false}function relatedscript(){var v=new Array(0);var w=new Array(0);var x=new Array(0);var A=new Array(0);for(var u=0;u<relurls.length;u++){if(!contains(v,relurls[u])){v.length+=1;v[v.length-1]=relurls[u];w.length+=1;w[w.length-1]=reljudul[u];x.length+=1;x[x.length-1]=relcuplikan[u];A.length+=1;A[A.length-1]=relgambar[u]}}reljudul=w;relurls=v;relcuplikan=x;relgambar=A;for(var u=0;u<reljudul.length;u++){var B=Math.floor((reljudul.length-1)*Math.random());var i=reljudul[u];var s=relurls[u];var y=relcuplikan[u];var C=relgambar[u];reljudul[u]=reljudul[B];relurls[u]=relurls[B];relcuplikan[u]=relcuplikan[B];relgambar[u]=relgambar[B];reljudul[B]=i;relurls[B]=s;relcuplikan[B]=y;relgambar[B]=C}var r=0;var D=Math.floor((reljudul.length-1)*Math.random());var z=D;var q;var t=document.URL;while(r<relmaxtampil){if(relurls[D]!=t){q="<li class='news-title clearfix'>";q+="<a href='"+relurls[D]+"' rel='nofollow' target='_top' title='"+reljudul[D]+"'><div class='overlayb'></div><img src='"+relgambar[D]+"' /></a>";q+="<a class='relinkjdulx' href='"+relurls[D]+"' target='_top'>"+reljudul[D]+"</a>";q+="<span class='news-text'>"+relcuplikan[D]+"</span>";q+="</li>";document.write(q);r++;if(r==relmaxtampil){break}}if(D<reljudul.length-1){D++}else{D=0}if(D==z){break}}};
//]]>
</script>
I'm kind of confused on what you're asking. This can probably be done with just CSS. Can you use inspect element and copy the code it produces when the page is loaded or paste a link to your page where the script is being used so I could take a look.
From what I think you're asking you could try doing something like this
<div class="container">
<div class="container-inner">
<div class="item"></div><div class="item"></div><div class="item"></div>
</div>
</div>
CSS:
.container {width:100%}
.container-inner {width:200%}
.item{float:left}
Just make sure your inner container is wider than your outer container and that should give you the scrolling effect you're looking for. Hope this helps
Related
To start off I'm terrible at Js and super new at it. I'm trying to make a random image pop up when the site goes to a 404. I can't tell if my website is actually running the code or not because console.log wasn't working. Because of that I took all my CSS and js and put it all into the same HTML file to see if that was the problem (it wasn't) Any help is much appreciated :)
HTML:
<html>
<head>
<?php include $_SERVER["DOCUMENT_ROOT"]."/php/ballsdeep1headndnav.php"; ?>
<link rel="stylesheet" href="../main.css" />
<style>
.yikes {
background-color: black;
}
.white {
color: white;
}
.cute_block {
border: blue;
border: 10px;
margin: 50px;
}
label {
margin: 10px;
}
input {
margin: 10px;
color: black;
}
</style>
<title>Yikes.</title>
</head>
<body class="yikes">
<h1 class="center white">
<404>
</h1>
<div id="getMeme()"></div>
<p class="white cute_block center">We have no clue how you ended up here</p>
<form class="white cute_block center">
<label for="how">How did you get here</label>
<input type="text" id="how" name="how"><br><br>
<label for="else">Anything else?</label>
<input type="text" id="else" name="else"><br><br>
<input type="submit" value="Submit">
</form>
</body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
<script>
function getMeme() {
var meme = new Array('images/no_more-ico.png', 'images/nothing.png', 'images/phpfiles.png', 'images/sike.png');
var pp = Math.floor(Math.random() * meme.length);
document.getElementById("result").onload = '<img src="' + meme[pp] + '" />';
}
</script>
</html>
Using your code, you would need to ensure the function getMeme is called/invoked. Furthermore, you would need to update the function to modify the innerHTML of the element with id result instead of assigning to it's event handler onload.
See demo below:
I've included a console.log for debugging purposes on stackoverflow as images shared in the question are not available.
<head>
<?php include $_SERVER["DOCUMENT_ROOT"]."/php/ballsdeep1headndnav.php"; ?>
<link rel="stylesheet" href="../main.css" />
<style>
.yikes {
background-color: black;
}
.white {
color: white;
}
.cute_block {
border: blue;
border: 10px;
margin: 50px;
}
label {
margin: 10px;
}
input {
margin: 10px;
color: black;
}
</style>
<title>Yikes.</title>
</head>
<body class="yikes">
<h1 class="center white">
<404>
</h1>
<span id="result"></span>
<p class="white cute_block center">We have no clue how you ended up here</p>
<form class="white cute_block center">
<label for="how">How did you get here</label>
<input type="text" id="how" name="how"><br><br>
<label for="else">Anything else?</label>
<input type="text" id="else" name="else"><br><br>
<input type="submit" value="Submit">
</form>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
<script>
function getMeme() {
var meme = new Array('images/no_more-ico.png', 'images/nothing.png', 'images/phpfiles.png', 'images/sike.png');
var pp = Math.floor(Math.random() * meme.length);
console.log("chose meme",meme[pp]); //line included for debugging purposes on stackoverflow as images shared in question are not available
//update `innerHTML` of target element
document.getElementById("result").innerHTML = '<img src="' + meme[pp] + '" />';
}
//call function to getMeme at the end of the page
getMeme();
</script>
</body>
</html>
var val_tujuan = "test";
$('#d_tujuan').on('click', function(){
var txt_tujuan = "<label class='label label-primary lbl_txt' style='margin:1px;'>"+val_tujuan+"</label>";
$('#d_tujuan').append(txt_tujuan);
});
.lbl_txt{
background-color:green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12">
<div id='fdaftar' class="form-group">
<label>Daftar Tujuan</label>
<div id='d_tujuan' style="border:#000 1px; background-color:#DDD; min-height:100px; word-wrap: break-word;">
</div>
</div>
</div>
I have a script that add labels to a div. But, the problem is the labels pass through the div border? How to fix it? I've tried the solution here but nothing works for me. (or maybe I fail to implementing the solutions there)
My jQuery:
$('#sel_tujuan').on('change', function(){
var val_tujuan = $(this).val();
var txt_tujuan = "<label class='label label-primary lbl_txt' style='margin:1px;'>"+val_tujuan+"</label>";
$('#d_tujuan').append(txt_tujuan);
});
My Div:
<div class="col-md-12">
<div id='fdaftar' class="form-group">
<label>Daftar Tujuan</label>
<div id='d_tujuan' style="border:#000 1px; background-color:#DDD; min-height:100px;word-wrap: break-word"></div>
</div>
</div>
Please check this and give this css word-wrap: break-word; to d_tujuan id. Add this css for label.
.label.lbl_txt {
display: inline-block;
}
var val_tujuan = "test";
$('#d_tujuan').on('click', function(){
var txt_tujuan = "<label class='label label-primary lbl_txt' style='margin:1px;'>"+val_tujuan+"</label>";
$('#d_tujuan').append(txt_tujuan);
});
.lbl_txt{
background-color:green;
}
.label.lbl_txt {
display: inline-block;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12">
<div id='fdaftar' class="form-group">
<label>Daftar Tujuan</label>
<div id='d_tujuan' style="border:#000 1px; background-color:#DDD; min-height:100px; display:block; word-wrap: break-word;">
</div>
</div>
</div>
The problem was it was not triggered in this way $('#sel_tujuan').on('change', function() because there was no such element with id #sej_tujuan so i just put to check its work on click on div.Click div its working. Also there was no such value in div you was trying to get value of div. If you trying to get text of div just use $('div selected').text();
$('#sel_tujuan').on('change', function(){
var val_tujuan = $(this).val();
like this way no just get value from input, options as far i know maybe you can get value of div probably but this way.
If you trying to get text of div just use $('div selected').text();
$(document).ready(function(){
$('#d_tujuan').click(function(){
var val_tujuan = $('input').val();
var txt_tujuan = "<label class='lbl_txt' style='margin:1px;'>"+val_tujuan+"</label>";
$('#d_tujuan').append(txt_tujuan);
});
});
#d_tujuan {
border:#000 1px;
background-color:#DDD;
min-height:100px;
display:block;
word-wrap: break-word;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12">
<div id='fdaftar' class="form-group">
<label>Daftar Tujuan</label>
<div id='d_tujuan'></div>
</div>
</div>
<input value='valued'>
Update
In your Div css word-wrap: break-word; will make your text inside div fit in div
SwitchWindow, Frame, Alert, everything I can think of and after lots of searching. Nothing has worked so far.
When I click on an "edit" button, a new window pops up with a text box, special character selection, save and exit buttons. All I want to do is enter text in the box but for some reason webdriver can not find the element.
Here's some HTML. The
textarea name="specHeading"
is what I'm trying to edit.
<script src="/js/componentlist.js" type="text/javascript">
<script src="/js/mrinformation.js" type="text/javascript">
<script src="/js/jquery.resources.js" type="text/javascript">
<script src="/js/validateresources.js" type="text/javascript">
<div class="ckmodal-next" style="top: 9px; left: 1281.5px;"></div>
<div class="ckmodal-prev" style="top: 9px; left: 261.5px;"></div>
<div class="ckmodal-close" style="top: -225px; left: 1239px;"></div>
<div class="ckmodal-background" style="width: 100%; height: 100%; position: fixed; top: 0px; left: 0px; background-color: rgb(51, 51, 51); opacity: 0.8; z-index: 10000000;"></div>
<div class="modal-container" style="opacity: 1; position: fixed; top: -212.5px; left: 321.5px; display: block; z-index: 10000001;">
<form class="form">
<div class="row">
<div class="col24">
<div class="box box-gray">
<h2>
<div class="content">
<fieldset class="full">
<div class="form-field full">
<label>Heading:</label>
<textarea name="specHeading"></textarea>
</div>
<div class="form-field full">
<div class="form-field bottom full">
</fieldset>
<div class="clear"></div>
</div>
</div>
</div>
</div>
</form>
</div>
</body>
</html>
It looks like there's no windows to switch to, and it's not an iframe, nor an alert. Here's what I think is the JavaScript from the modal.
<script src="/js/productheaders.js" type="text/javascript">
;(function($){
var $currentEditHeader = null;
function setupForm(e) {
var $this = $(this),
value = $this.siblings('span').html();
$currentEditHeader = $this.parents('.product-header');
$('#edit-header').ckmodal({
onShow: function(){
$('textarea[name=specHeading]').val(value.replace(/<br\s*[\/]?>/g, '\n')).focus();
}
});
}
function saveHeader(e) {
var $this = $(this),
value = $('textarea[name=specHeading]').last().val();
if ( value == '' ) {
var defaultValue = $currentEditHeader.attr('data-default-value');
$currentEditHeader.children('span').text(defaultValue);
$currentEditHeader.addClass('default');
} else {
$currentEditHeader.children('span').html(value.replace(/<[^>]*>?/g, '').replace(/\n/g, '<br>'));
$currentEditHeader.removeClass('default');
}
The "popup" might be not a separate window/frame/alert, but part of your main page, which is just made visible.
You can treat it as such. Hard to tell with just this excerpt.
You might have to wait for it to be visible if there is some kind of animation involved.
Additionally, there are some issues inserting text in those text fields. The following worked for us in such cases:
Call textFieldElement.clear()
Then call textFieldElement.sendKeys()
I am trying to show and hide certain divs within my document.
I have put together code using getElementById and want to apply style.display to each element of array. I am not sure if this is possible.
Currently my code looks like this:
Javascript
<script>
function chart1() {
var show = new array ["#chartdiv1", "#unit-price"];
document.getElementByid("graph-container").show.style.display = "inline";
var hide = new array ["#chartdiv2", "#unit-price-value",
"#chartdiv3", "#unit-price-value"];
document.getElementByid("graph-container").hide.style.display = "none";
};
</script>
HTML
<div id="graph-container">
<!-- Unit Price Dollar -->
<div id="unit-price" style="text-align: center; font-family:'Trebuchet MS', Arial, Helvetica, sans-serif; font-size: 14px; color: #666; clear: both; margin-bottom: 20px;">VPM Global Select Opportunities Fund - Dollar Unit Price
<br>Weekly: 2012/02/03 to 2014/10/24</div>
<div id="chartdiv1" style="width:100%; height:600px;"></div>
<!-- Unit Price Dollar Target Return -->
<div id="unit-price-value" style="text-align: center; font-family:'Trebuchet MS', Arial, Helvetica, sans-serif; font-size: 14px; color: #666; clear: both; margin-bottom: 20px;">Value of $1000 Invested at inception relative to Target Return
<br>Weekly: 2012/02/03 to 2014/10/24</div>
<div id="chartdiv2" style="width:100%; height:600px;"></div>
<!-- Unit Price Rand Versus Inflation -->
<div id="unit-price-rand" style="text-align: center; font-family:'Trebuchet MS', Arial, Helvetica, sans-serif; font-size: 14px; color: #666; clear: both; margin-bottom: 20px;">Value of R1000 Invested at inception relative to Inflation Benchmarks
<br>Weekly: 2012/02/03 to 2014/10/24</div>
<div id="chartdiv3" style="width:100%; height:600px;"></div>
<div style="text-align: center; font-family:'Trebuchet MS', Arial, Helvetica, sans-serif; font-size: 12px; color: #666; clear: both; margin-top: 20px;">
<br>* VPM GSO - VPM Global Select Opportunities Fund</div>
<br>
</div>
<!-- End Graph Container-->
Original Javascript that works in IE11, Safari, Opera, FireFox and Chrome
This is the orignal code I created it worked in all the browsers except IE8-10, maybe someone can guide me on this.
function chart1() {
document.getElementById("chartdiv1").style.display = "inline";
document.getElementById("unit-price").style.display = "block";
document.getElementById("chartdiv2").style.display = "none";
document.getElementById("unit-price-value").style.display = "none";
document.getElementById("chartdiv3").style.display = "none";
document.getElementById("unit-price-rand").style.display = "none";
};
</script>
You help is greatly appreciated.
I think that what you are trying to do is this:
function chart1() {
var show = ["chartdiv1", "unit-price"];
for ( var i = 0; i < show.length; ++i )
document.getElementById(show[i]).style.display = "inline";
var hide = ["chartdiv2", "unit-price-value","chartdiv3", "unit-price-value"];
for ( var i = 0; i < hide.length; ++i )
document.getElementById(hide[i]).style.display = "none";
};
In this way you itearate over the two arrays so that the elements in show are shown and the others are hidden.
The problems were:
the IDs if you use plain js and not css or jQuery are without the #
The correct syntax for array is Array
You have to iterate over the elements in order to hide/show each of them
You have to remove the hide/show after the getElementById selection, because in that way you are accessing to a property inside that Object
You are mixing pure JS and JQuery.
hide() and show() in JQUery
So, for you: $("#graph-container").hide();
style.display = "none"; in pure JS
So, for you: document.getElementByid("graph-container").style.display = "none";
For the difference between hidden and none: What is the difference between visibility:hidden and display:none?
Try using this, it should work.
document.getElementById("graph-container").style.visibility="visible"; //Show the container
var hide = new array ["#chartdiv2", "#unit-price-value","#chartdiv3", "#unit-price-value"];
document.getElementById("graph-container").style.visibility="hidden"; //Hide the container
Try this, using javascript
document.getElementById("<your tag id>").style.visibility = "hidden";
And again to show the element, you can use,
document.getElementById("<your tag id>").style.visibility = "visible";
A small demontration i submitted in Snippet. Check if it helps you.
<html>
<body>
<div id="myP">This is a p element.</div>
<button type="button" onclick="myFunction()">Hide content of div</button>
<button type="button" onclick="myFunction1()">Show content of div</button>
<script>
function myFunction() {
document.getElementById("myP").style.visibility = "hidden";
}
function myFunction1() {
document.getElementById("myP").style.visibility = "visible";
}
</script>
</body>
</html>
Using Jquery, you can use show() and hide() method.
JQuery show and hide method
I want to know the Client div position
var p = $('div#Client');
var position = p.position();
$('div#Client').fadeTo('slow',.6);
$('div#Client').append('<div style="position: absolute;top:' + position.top + ';
left:' + position.left + ';width: 100%;height:100%;z-index:2;opacity:0.4;
filter: alpha(opacity = 50)"></div>');
The result is:
Position.left = 0 and Top = 0
so the new Div in the Jquery code is on all the page
what I need is to put the new div on top of the div#Client
HTML code:
<div style="margin-left: 10px; margin-bottom: 10px; padding-bottom: 15px">
<div class="Title">Sales</div>
<div id="Sales" class="Content">
Some infos for Sales person here
</div>
</div>
</div>
<div style="margin-left: 10px; margin-bottom: 10px; padding-bottom: 15px">
<div class="Title">Client</div>
<div id="Client" class="Content">
Some infos for the client here
</div>
</div>
</div>
this is : http://jsfiddle.net/aaNUa/14/
Actually what's I'm trying to do is to block the Div Client but keep the Div Sales activated for editing. with this code all the page is blocked.
Use before() method in Jquery :
$(document).ready(function(){
$("div#Client").before('<div class="Title">Client</div>');
});
fiddle : http://jsfiddle.net/aaNUa/
HTML Code :
<div style="margin-left: 10px; margin-bottom: 10px; padding-bottom: 15px">
<div class="Title">Sales</div>
<div id="Sales" class="Content">
Some infos for Sales person here
</div>
</div>
</div>
<div style="margin-left: 10px; margin-bottom: 10px; padding-bottom: 15px">
<div id="Client" class="Content">
Some infos for the client here
</div>
</div>
</div>
add this to your CSS:
div#client{
position:relative;
}
so that the inner DIV which is absolutely positioned will properly align with the parent div.
Make the content of function append() in one line.