I have the following line of html code which i don't have access to.
Since i wanted to hide a TAB which is the first <a href='#all' ...>, I used the custom css options of visual composer which allows me to override an existing code. To do that I simply used
.testing, a[href='#all'] {
visibility: hidden; }
I'm fine with this as long as that TAB is not visible. But next problem here is this particular TAB is always selected when i refresh the page, simply because the class=selected is applied to it. Can i somehow override it using css to apply the class selected to one of the other 2 <li>'s ?
Edit
I managed to find an access to the following line of php code which stands behind these TABs
<li>
<ul class="tabs">
<?php
$obj = new stdClass();
$obj->id = 0;
$obj->title = esc_html__('All', 'arcane');
$obj->abbr = esc_html__('All', 'arcane');
$obj->icon = 0;
array_unshift($games, $obj);
for($i = 0; $i < sizeof($games); $i++) :
$game = $games[$i];
$link = ($game->id == 0) ? 'all' : 'game-' . $game->id;
$p = array( 'game_id' => $game->id,'status' => array('active', 'done'));
$matches_tab = $ArcaneWpTeamWars->get_match($p, false, true);
if(!empty($matches_tab)){
?>
<li<?php if($i == 0) echo ' class="selected"'; ?>><?php echo esc_attr($game->abbr); ?><div class="clear"></div></li>
<?php } endfor; ?>
</ul>
<div class="clear"></div>
</li>
You can assign the selected class to the second li by changing the 0 to 1 and also use your own css to hide the first one:
<li<?php if($i == 1) echo ' class="selected"'; ?>>
or you can totally remove the first option which refers to all by starting the loop from 1 instead of 0 and ignore hiding first one using css:
for($i = 1; $i < sizeof($games); $i++) : // Start loop from 1 instead of 0
You can try to change the php code and instead of
$link = ($game->id == 0) ? 'all' : 'game-' . $game->id;
to have
$link = ($game->id == 2) ? 'game-2' : 'game-' . $game->id;
In this way the CS:GO should be the first. Im not 100% sure but try it :)
Related
I have created alphabetic list items using like this
<ul class="search_a_m nav nav-tabs" id="getAlpha">
<?php
foreach (range('A', 'Z') as $char) {
$default = "";
$default = $char == 'A' ? 'active' : "";
?>
<li class="nav-item"><?php echo $char;?></li>
<?php
}
?>
</ul>
<h1>
<div id="titleh1"></div>
</h1>
when I click any alphabetic button it will return below title I have get this using jquery:
let sBtn = document.getElementById('getAlpha')
document.getElementById("titleh1").innerHTML = "A";
if(sBtn){
sBtn.addEventListener('click', e => {
let btnid = e.target.textContent
console.log(btnid)
document.getElementById("titleh1").innerHTML = btnid;
})
}
But It will be getting errors when clicking outside of list items
See below image error I clicked red marks places and getting this error:
So need to fix this error why I am getting this error?
Add class at <a> element, like this:
<ul class="search_a_m nav nav-tabs" id="getAlpha">
<?php
foreach (range('A', 'Z') as $char) {
$default = "";
$default = $char == 'A' ? 'active' : "";
echo '<li class="nav-item">'.
''.$char.''.
'</li>';
}
?>
</ul>
<h1><div id="titleh1"></div></h1>
then use selector classname:
let elements = document.getElementsByClassName('Alpha');
document.getElementById("titleh1").innerHTML = "A";
for (let i = 0; i < elements.length; i++) {
elements[i].addEventListener('click', function(){
let btnid = this.text;
console.log([this, btnid]);
document.getElementById("titleh1").innerHTML = btnid;
});
}
I have script which I use to create top navigation on my site.
My problem, I do not know how to add class last to the class that is already used to the last element of an array to make it look class="tab selected last" when selected or class="tab last" when not selected. Class last will get rid of the divider line on the right of the nave menu element.
here is my script
while ($info = $res -> fetch()){
$link_lbl = $info['link_lbl'];
$link_dir = $info['link_dir'];
$link_url = $info['link_url'];
$link = ($link_dir == NULL) ? SITE_DOMAIN.DST.$link_url : SITE_DOMAIN.DST.$link_dir.DS.$link_url;
$link_title = $info['link_title'];
$selected = ($info['ID'] == $number) ? 'tab selected' :('tab');
$rd_div = ($info['link_show'] == 1) ? '<div><a class="'.$selected.'" href="'.$link.'" title="'.$link_title.'">'.$link_lbl.'</a></div>' : ('');
print<<<END
$rd_div
END;
}
Please help.
I have tried to use end($rd_div) to find the last element, but do not know how to change it.
Thanks in advance
$rowNum = 0;
while ($info = $res -> fetch()){
$rowNum++;
// ...
$last = ($rowNum == $res->rowCount()) ? ' last' : '';
$rd_div = ($info['link_show'] == 1) ? '<div><a class="'. $selected . $last . '" href="'.$link.'" title="'.$link_title.'">'.$link_lbl.'</a></div>' : ('');
My name is Manuel, I am a web design student and am starting to take my first steps with web design. Recently I tried to validate
this site:
http://accesosnormalizados.com
I used the W3C validator, at first I found about 30 errors, and can correct them all except one that says: 'there is no attribute
"onload"'.
Apparently not support XHTML onload tag, and I use a Joomla extension called Vertical Menu using onload. This is a free extension and works well but I have found it has some bugs, especially when validating the website.
This is the PHP code for extension:
get( 'menutype', 'mainmenu' );
$qry = "SELECT id, name,parent, link,type,browserNav FROM #__menu WHERE menutype = '".$menutype."' AND published = 1 ORDER BY ordering";
$database->setQuery($qry);
$rows = $database->loadObjectList();
if(isset($GLOBALS['vertical_menu'])) $GLOBALS['vertical_menu']++;
else $GLOBALS['vertical_menu'] = 0;
function getMenuChildList($rows, $parentId) {
$childRows = array();
foreach ($rows as $row) {
if ($row->parent == $parentId) {
$childRows[] = $row;
}
}
return $childRows;
}
function drawVerticalMenu($rows, $showsubcats, $parentId = 0) {
$categories = $showsubcats || !$parentId ? getMenuChildList($rows, $parentId) : array();
if ($parentId) {
if (!count($categories)) {
echo '';
return;
} else echo '';
echo '';
} else echo '';
echo '';
foreach ($categories as $category) {
$link = $category->link. (preg_match("/^http:\/\/|^https:\/\//",$category->link)? "" : '&Itemid='.$category->id);
$blank = $category->browserNav? ' target="_blank" ' : ' ';
echo 'id.'" class="menu">'.$category->name.' ';
drawVerticalMenu($rows, $showsubcats, $category->id);
}
echo '';
if ($parentId && count($categories)) echo '';
}
$document = &JFactory::getDocument();
$document->addScript('https://ajax.googleapis.com/ajax/libs/dojo/1.5.0/dojo/dojo.xd.js');
$document->addScript('modules/mod_vertical_menu/script/menu.js');
$document->addStyleSheet('modules/mod_vertical_menu/style/menu.css');
$document->addCustomTag('
div#MenuContainer'.$GLOBALS['vertical_menu'].' table#VerticalMenu'.$GLOBALS['vertical_menu'].' {
width: '.$params->get('categorymenu_width', 150).'px;
opacity: '.$params->get('categorymenu_out', 0.8).';
FILTER: progid:DXImageTransform.Microsoft.Alpha(Opacity='.($params->get('categorymenu_out', 0.8)*100).');
}
');
echo '';
drawVerticalMenu($rows, $params->get('show_subcats', 1));
echo 'get('categorymenu_out', 0.8).',over : '.$params->get('categorymenu_over', 1).',duration : '.$params->get('categorymenu_fade', 300).',id : '.$GLOBALS['vertical_menu'].',width : '.$params->get('categorymenu_width', 150).'});" alt=""/>';
echo '';
?>
The problem is at the end:
echo '';
drawVerticalMenu($rows, $params->get('show_subcats', 1));
echo 'get('categorymenu_out', 0.8).',over : '.$params->get('categorymenu_over', 1).',duration : '.$params->get('categorymenu_fade', 300).',id : '.$GLOBALS['vertical_menu'].',width : '.$params->get('categorymenu_width', 150).'});" alt=""/>';
echo '';
?>
I think the extension uses the onload event to display the sub-menus when the user moves the mouse pointer over it.
What I want is to replace the onload with other event handler or some other label that is supported by XHTML and that is as similar to onload.
I would appreciate your help ...
You can remove the onload attributes and then add some simple javaScript to your page to run some functions when the page finishes loading.
It would look something like this:
<script>
window.onload=function(){
new WW.VerticalMenu({out : 1,over : 1,duration : 300,id : 0,width : 180}); // example of one of the functions being run
};
</script>
Good luck with your studies
It appears the source comes out like this right
<img src="/modules/mod_vertical_menu/images/center.gif" style="display:none" onload="new WW.VerticalMenu({out : 1,over : 1,duration : 300,id : 0,width : 180});" alt=""/>
As that looks like imho an unsavoury method of instantiating the menu I would try and loose that attribute completely by removing the offending php echo section and instead add javascript to load
as this is using dojo maybe this will help -- sorry I do not use dojo
http://mail.dojotoolkit.org/pipermail/dojo-interest/2012-May/066106.html
so php wise this would be
echo '<img src="modules/mod_vertical_menu/images/center.gif" style="display:none" alt=""/>'; echo '</div>';
echo "<script>" ."javascript or dojo script here ".</script>"
I would even suggest removing the image and using the window onload advocated below if you can
This is a part fo php code, which use the contentArray, which is a JSON, and generate the UI to the user, it generate html tags, also, it generate js code too.... It works, but I think the code is pretty difficult to read and maintain, any ideas??? thank you.
for($i = 0; $i < count($contentArray); $i++){
if($i %2 == 0){
echo ("<li class='even_row'>");
}else{
echo ("<li class='odd_row'>");
}
$content = $contentArray[$i];
echo("<textarea class='userdata' id='user_data_textarea_".$content->{'m_sId'}."'>");
echo($content->{'m_sDataContent'});
echo("</textarea>");
echo("</li>");
echo("<script type='text/javascript'>");
echo("$('#user_data_textarea_".$content->{'m_sId'}."').bind('keydown', function(e){");
echo(" TypingHandler.handleTypingInUserDataTextArea(".$content->{'m_sId'}.", e);");
echo(" });");
echo("</script>");
}
first for your odd and even styling there is not need for a class just use css
here is info on that
then in php only echo what you need in one line
$count = count($contentArray);
for($i = 0; $i < $count; $i++){
$content = $contentArray[$i];
echo('<li><textarea class="userdata" id="user_data_textarea_"'.$content->{'m_sId'}.'">'.$content->{'m_sDataContent'}.'</textarea></li>');
}
and lets put the jquery in the html page away from php
we get can get every item by using starts with selector
$('[id^=user_data_textarea_]').bind('keydown', function(e){
var id = this.id.str_replace("user_data_textarea","");
TypingHandler.handleTypingInUserDataTextArea(id, e);
});
One tip on your "for" loop, you should calculate the count of $contentArray before the loop. Every time the loop executes, it has to call that function.
$count = count($contentArray);
for ($i=0; $i<count; $i++) {
// ...
}
You could try real HTML:
<?php
for($i = 0; $i < count($contentArray); $i++){
$rowClass = $i %2 == 0 ?'even_row' : 'odd_row';
?>
<li class='<?= $rowClass ?>'>
<textarea class='userdata' id='user_data_textarea_<?=$content->{'m_sId'}?>'>
<?= $content->{'m_sDataContent'} ?>
</textarea>
</li>
<script type='text/javascript'>
//etc...
</script>
<?php } ?>
It should look something like this, for better readability in the IDE.
<?php
foreach($contentArray as $content){
?>
<li>
<textarea class="userdata" id="user_data_textarea<?php echo htmlentities($content['m_sId']); ?>">
<?php echo htmlspecialchars($content['m_sDataContent']); ?>
</textarea>
<script type="text/javascript">
$('#user_data_textarea_<?php echo htmlspecialchars($content['m_sId']); ?>').bind('keydown',function(e){
TypingHandler.handleTypingInUserDataTextArea('<?php echo htmlspecialchars($content['m_sId']); ?>',e);
});
</script>
</li>
<?php
}
You could remove the ( ) from the echo statements, they're not necessarily needed and might help make it look a little neater...
That actually looks pretty understandable to me; I could figure out what you're doing without difficulty. The only difference I would suggest would be the use of ternary operators for the row class:
echo "<li class='".( ($i%2 == 0) ? "even" : "odd" )."_row'>";
...but that's just me, some would find that MORE confusing, rather than less. I personally like putting it all in one line.
Personnaly, I like to use printf to write html code in php. It could look like:
for($i = 0; $i < count($contentArray); $i++){
printf("<li class='%s'>", $i % 2 ? "odd_row" : "even_row");
$content = $contentArray[$i];
printf("<textarea class='userdata' id='user_data_textarea_%s'>%s</textarea>",
$content->{'m_sId'},
$content->{'m_sDataContent'});
echo("</li>");
echo("<script type='text/javascript'>");
printf("$('#user_data_textarea_%1$s').bind('keydown', function(e){
TypingHandler.handleTypingInUserDataTextArea(%1$s, e);
});",
$content->{'m_sId'});
echo("</script>");
}
<?php
foreach($contentArray as $content){
$class = ($i %2 == 0) ? "even_row": "odd_row"; ?>
<li class="<?php echo $class ?>">
<textarea class='userdata' id='user_data_textarea_<? echo $content['m_sId'] ?>'>
<? php echo $content['m_sDataContent'] ?>
</textarea>
</li>
<script type='text/javascript'>
$('#user_data_textarea_<?php echo content['m_sId'] ?>').bind('keydown', function(e){
TypingHandler.handleTypingInUserDataTextArea(<?php $content['m_sId'] ?>, e);
});
</script>
<?php } // end foreach ?>
jQuery code should be already in the HTML, using some main selector and not binding elements one by one, it not makes sense for me. That should clarify your code.
for($i = 0; $i < count($contentArray); $i++){
$content = $contentArray[$i];
echo "<li class='" . (($i %2 == 0) ? "even_row" : "odd_row") . ">";
echo "<textarea class='userdata' id='user_data_textarea_".$content->{'m_sId'}."'>";
echo $content->{'m_sDataContent'};
echo "</textarea>";
echo "</li>";
}
ADDED
A generic case:
$(function() {
$('.userdata').click(function() {
some_function($(this).attr('id');
});
})
That is, bind using a class selector and late use some unique identifier for doing the job.
Put everything in arrays, then echo them at the END of your loop.
// Put each item in the array, then echo at the end
$items = array();
$js = array();
// I'm assuming that your content array has numeric keys
// if not, use the for statement from your original code
foreach ($contentArray as $i => $content)
{
// using sprintf
$items[] = sprintf('<li class="%s_row"><textarea class="userdata" id="user_data_textarea_%s">%s</textarea></li>'
, ($i % 2) ? 'even' : 'odd'
, $content->m_sId
, $content->m_sDataContent
);
// or just plain old concatenation
$js[] = "$('#user_data_textarea_{$content->m_sId}').bind('keydown', function(e){TypingHandler.handleTypingInUserDataTextArea({$content->m_sId}, e);});";
}
echo "<ul>" . join("\n", $items) . "</ul>\n"
. '<script type="text/javascript">' . join("\n", $js) . "</script>\n";
Separate your content and code using for example smarty. It requires some infrastructure investment in the short term, but improves maintenance in the long run.
Reflecting the comments, let's then treat PHP as a real templating language.
$contentCount = count($contentArray);
for($i = 0; $i < $contentCount; $i++)
{
$rowType = ( $i % 2 ) ? 'even' : 'odd';
$content = $contentArray[$i];
echo <<<EOT
<li class='{$rowType}_row'>
<textarea class='userdata' id='user_data_textarea_{$content->m_sId}'>
{$content->m_sDataContent}
</textarea>
</li>
<script type="text/javascript">
$('#user_data_textarea_{$content->m_sId}').bind('keydown', function(e)
{
TypingHandler.handleTypingInUserDataTextArea({$content->m_sId}, e);
}
</script>
EOT;
}
A complete beginners question.
I have a large number of divs (>80) on a page (page2.php) and what I would like to do is open page1.php, click on a link to open page2.php and show only one of these divs depending on which link was clicked.
I have a basic working version of this by adding an if else to the divs. I've only done this on 5 of the divs so far and it works but it also seems a fairly in-eloquent way of doing things.
Page 1:
this is a link
Page 2:
<?php
$divID = $_GET['id'];
?>
<div id="r0101" <? if($divID == r0101): ?>class="show"<? else: ?>class="hidden"<? endif; ?> >
This then applies a css class to hide or show the div.
Would it be possible to have a function or whatever at the top of the page that takes the id from the url, figures out that there is a div with that id also, show it and hide all the others? This is probably an easy thing to do but it has me stumped.
Any help greatly appreciated.
Thanks.
Let alone the divs and work on css (as you relay on that to hide/show the divs).
You can generate not only markup but css stylesheet too. Use a similar one (put it at
the end of your head section). And let the browser do the work for you ;)
<style type="text/css">
div {
display: none;
}
div#<?php echo $_GET['id']; ?>:{
display: block;
}
</style>
$divs = array('r0101', 'r0102', 'r0103');
$divID = $_GET['id'];
foreach($divs as $div)
{
echo '<div id="'.$div.'" class="';
if ($div == $divID)
{
echo 'show';
}
else
{
echo 'hidden';
}
echo '">';
}
Assuming I have read the question correctly, you have a set of divs (r0101, r0102, etc.) and wish to show only one of these depending on the page you are on. The code above creates an array of these divs, loops through and creates the div. The class of the div is 'show' if the div matches the div from the page url, and 'hidden' otherwise.
First of all, you should consider a way of making your divs to be printed dynamically. Something like:
<?php
for($i = 1; $i <= 80; $i++):
?>
<div id="r<?php print $i; ?>">div contents</div>
<?php
endfor;
?>
Also, if you find a way of doing what's stated above, you can also do something like:
<?php
for($i = 1; $i <= 80; $i++):
if($i == $_GET['id']){
$class = 'show';
} else {
$class = 'hidden';
}
?>
<div id="r<?php print $i; ?>" class="<?php print $class; ?>">div contents</div>
<?php
endfor;
?>
or
<?php
for($i = 1; $i <= 80; $i++):
$class = ($i == $_GET['id']) ? 'show' : 'hidden';
?>
<div id="r<?php print $i; ?>" class="<?php print $class; ?>">div contents</div>
<?php
endfor;
?>
which is exactly the same but (using the ternary operator) spares a few lines and (some people think) it decreases readability.
If you want to make your download faster, you should output only the div you want to show. You could do something like this:
$divs = array('r0101', 'r0102', 'r0103');
$divID = $_GET['id'];
foreach($divs as $div)
{
if($div == $divID){ echo '<div> /* CONTENT HERE */ </div> };
}
Hope this helps.